React如何使用Hooks简化受控组件的状态绑定

这篇文章主要介绍React如何使用Hooks简化受控组件的状态绑定，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司坚信：善待客户，将会成为终身客户。我们能坚持多年，是因为我们一直可值得信赖。我们从不忽悠初访客户，我们用心做好本职工作，不忘初心，方得始终。十余年网站建设经验成都创新互联公司是成都老牌网站营销服务商,为您提供网站设计制作、成都做网站、网站设计、H5开发、网站制作、高端网站设计、微信小程序定制开发服务,给众多知名企业提供过好品质的建站服务。

ECMAScript 6

文章中大量用到了 ES6 语法，比如解构赋值和函数参数默认值、剩余参数、展开语法、箭头函数等。

Hooks

React 在 16.8 版本中推出了 Hooks，它允许你在“函数组件”中使用“类组件”的一些特性。

React 本身提供了一些 Hooks，比如 useState、useReducer 等。通过在一个以“use”作为命名起始的函数中调用这些 Hooks，就得到了一个 custom Hook(自定义 Hook)。

Custom Hooks 允许我们把任何逻辑封装到其中，以便于复用足够小的组件逻辑。

Controlled Components

当我们把像 和 <select> 这样的 HTML 元素本身的状态交给 React state 去管理，我们就得到了一个“受控组件”。</p><p><strong>styled-components</strong></p><p>一个与 React 契合良好的 CSS in JS 库。它允许你使用 JS 编写样式，并编译成纯 CSS 文件。<br/>下面代码中所有的样式都是使用它编写的。如果对代码中样式的实现不是很感兴趣的话, 这个可以跳过。</p><p><strong>代码实现</strong></p><p><strong>Input 组件</strong></p><p>首先我们需要实现一个 Input 组件，我们将在该组件的基础上进行输入、校验并提示。</p><p>Input.js</p><pre>import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; const Wrap = styled.div({  display: 'flex',  flexDirection: 'column',  label: { display: 'flex', alignItems: 'center' },  input: {   marginLeft: 8,  },  p: {   color: 'red',  }, }); function Input({ label, type, helperText, error, ...otherProps }) {  return (   <Wrap>    <label>     {label}:     <input {...otherProps} type={type} />    </label>    {error && <p>{helperText}</p>}   </Wrap>  ); } Input.propTypes = {  label: PropTypes.string,  type: PropTypes.string,  helperText: PropTypes.string,  error: PropTypes.bool, }; export default Input;</pre><p>该组件主要接收以下几个 props：</p><ul><li><p>label label 标签的文本</p></li><li><p>type 赋值给原生 input 标签的 type 属性</p></li><li><p>error 数据类型为 Boolean，如果为 true 则表示当前表单域有错误，即验证不通过</p></li><li><p>helperText 当前表单域验证不通过时，显示在表单域下方的提示文字</p></li><li><p>otherProps props 中除了上述四个以外的其他属性，全部赋值给原生 input 标签</p></li></ul><p><strong>Custom Hook</strong></p><p>有了 UI 组件之后，就可以开始实现我们的自定义 Hook 了。</p><p>useInput.js</p><pre>import { useState } from 'react'; export default function useInput({  initValue = '',  helperText = '',  validator = () => true,  validateTriggers = ['onChange'], } = {}) {  // 保存用户输入的值，使用 initValue 作为初始值  const [value, setValue] = useState(initValue);  // Boolean 类型，表示当前表单项的验证状态  const [error, setError] = useState(false);  function onChange(e) {   const { value } = e.target;   setValue(value);   // 根据 validateTriggers 的选项，决定是否要在 onChange 里进行校验   if (validateTriggers.includes('onChange')) {    setError(!validator(value));   }  }  /**   * 根据 validateTriggers 生成相应的事件处理器   */  function createEventHandlers() {   const eventHandlers = {};   validateTriggers.forEach(item => {    // 生成相应的事件处理器，并在其中做输入校验。    eventHandlers[item] = e => {     const { value } = e.target;     setError(!validator(value));    };   });   return eventHandlers;  }  const eventHandlers = createEventHandlers();  return {   value,   helperText,   error,   ...eventHandlers,   onChange,  }; }</pre><p>useInput 接收一个 options 对象作为参数，考虑到扩展性，使用一个配置对象作为参数比较好。</p><p>options 对象拥有以下几个属性：</p><ul><li><p>initValue 输入框的初始值</p></li><li><p>helperText 当表单验证不通过时显示的字符串</p></li><li><p>validator 用于进行表单验证的函数，接收 value 作为参数，并返回一个 Boolean 值，表示表单验证是否通过</p></li><li><p>validateTriggers 字符串数组，表明在哪个或哪几个事件中调用 validator 进行输入校验。</p></li></ul><p>在函数体中，我们调用两次 useState 来初始化 value 和 error 的值，分别保存用户输入的值和当前表单域的校验结果。<br/>然后，声明一个 onChange 方法用来绑定 input 元素的 change 事件，在该方法中，我们把用户输入的值赋值给 value，同时根据 validateTriggers 的值，决定是否要在该方法中进行输入校验。该方法随后会被返回出去，再作为 props 传递给相应的组件，完成受控组件的状态绑定。</p><p>我们还需要声明一个 createEventHandlers 方法，该方法通过遍历 validateTriggers，生成相应的事件处理器，并在这些事件处理器中进行输入校验。</p><p>最后我们调用 createEventHandlers 方法，并把生成的 eventHandlers（事件处理器） 通过扩展运算符，插入到最终返回的对象中。</p><p>注意：这里我们需要把 onChange 放在最后，以免带有状态绑定的 onChange 方法被 eventHandlers 中的 onChange 覆盖掉。</p><p><strong>具体使用<br/></strong></p><p>现在让我们来看看实际该如何使用：</p><pre>import React from 'react'; import Input from './Input'; import useInput from './useInput'; // 用于验证邮箱的正则表达式 const EMAIL_REG = /\S+@\S+\.\S+/; export default function Form() {  const email = useInput({   initValue: '',   helperText: '请输入有效的邮箱！',   validator: value => EMAIL_REG.test(value),   validateTriggers: ['onBlur'],  });  const password = useInput({   initValue: '',   helperText: '密码长度需要在 6-20 之间！',   validator: value => value.length >= 6 && value.length <= 20,   validateTriggers: ['onChange', 'onBlur'],  });  /**   * 判断是否禁用按钮   */  function isButtonDisabled() {   // 当邮箱或密码未填写时，或者邮箱或密码输入校验未通过时，禁用按钮   return !email.value || !password.value || email.error || password.error;  }  /**   * 处理表单提交   */  function handleButtonClick() {   console.log('邮箱：', email.value);   console.log('密码：', password.value);  }  return (   <div>    <Input {...email} label="邮箱" type="email" />    <Input {...password} label="密码" type="password" />    <button disabled={isButtonDisabled()} onClick={handleButtonClick}>     登录    </button>   </div>  ); }</pre><p>这里调用了两次 useInput，初始化 email 和 password 表单域数据。</p><p>然后使用扩展运算符，把值全部赋给 Input 组件。只用了几行代码就完成了定义初始值和受控组件的绑定，是不是很方便？</p><p>当我们输入邮箱的时候，并不会出现校验提示，但是一旦从邮箱输入框失去焦点以后，输入的值就会被校验，并根据校验结果显示相应的提示。而密码输入框，则会在输入的过程中和失焦后都进行校验。</p><p>以上是“React如何使用Hooks简化受控组件的状态绑定”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！</p> <br> 文章标题：React如何使用Hooks简化受控组件的状态绑定 <br> 本文来源：<a href="http://6mz.cn/article/jsciep.html">http://6mz.cn/article/jsciep.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/despio.html">用django那么多的原因-创新互联</a> </li><li> <a href="/article/despjh.html">新媒体运营现状和发展趋势是什么-创新互联</a> </li><li> <a href="/article/desphc.html">HTML5新增属性中classList属性怎么用-创新互联</a> </li><li> <a href="/article/despci.html">数据库文件坏块损坏导致打开时报错怎么办-创新互联</a> </li><li> <a href="/article/desppd.html">python导入pandas具体步骤方法-创新互联</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上快上网。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求