这篇文章主要介绍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> URL地址：<a href="http://pwwzsj.com/article/jsciep.html">http://pwwzsj.com/article/jsciep.html</a> </div> </div> <div class="contentr fr"> <h3>其他资讯</h3> <ul> <li> <a href="/article/jihigs.html">Win7怎么安装Vagrant</a> </li><li> <a href="/article/jihicc.html">如何在微信小程序中自定义toast</a> </li><li> <a href="/article/jihigj.html">JavaScript设计模式之策略模式的实现方法</a> </li><li> <a href="/article/jihipd.html">LINUX下如何用CRON实现定时执行脚本</a> </li><li> <a href="/article/jihipo.html">互联网电视怎么买？看完对比我知道怎么选了…</a> </li> </ul> </div> </div> </div> <!--底部--> <footer> <div class="foot"> <div class="container"> <h1>平武火炬建站您身边的网站制作服务商</h1> <div class="foot1"> <ul> <li> <dl><i class="iconfont"></i><b>地址ADDRESS</b></dl> <p>四川-成都青羊区太升南路288号<br> 锦天国际A座10楼 </p> </li> <li> <dl><i class="iconfont"></i><b>电话/TEL</b></dl> <p><a href="tel:02886922220" target="_blank">028 86922220</a> (工作日)<br> <a href="tel:18980820575" target="_blank">1898082 0575</a> ( 7x24 ) </p> </li> <li> <dl><i class="iconfont"></i><b>QQ咨询</b></dl> <p> 244261566 (售前)<br> 631063699 (售后) </p> </li> <li> <dl><i class="iconfont"></i><b>邮箱/E: mail</b></dl> <p> service@cdcxhl.com (业务)<br> hr@cdcxhl.com (求职) </p> </li> </ul> </div> </div> </div> <div class="copy container"> Copyright © 2017-2023 All Rights Reserved. 青羊区火炬信息咨询工作室 版权所有 <a href="http://www.beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024060174号-3</a> [原创设计,独立版权。未经许可.不得拷贝或镜像]<br> <a href="http://www.kswsj.cn/" target="_blank">网站营销推广</a> | <a href="https://www.cdcxhl.com/pinpai.html" target="_blank">品牌网站设计</a> | <a href="http://www.cdweb.net/" target="_blank">自适应网站制作</a> | <a href="http://cdkjz.cn/wangzhan/pinpai/" target="_blank">品牌网站制作</a> | <a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a> | <a href="https://www.cdcxhl.com/cloud/" target="_blank">云服务器</a> | <a href="https://www.cdcxhl.com/weihu/abazhou.html" target="_blank">平武网站维护</a> | (平武网站制作QQ : 631063699 )</div> </footer> <!--在线咨询--> <div class="fot"> <ul> <li> <a href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" target="_blank"> <img src="/Public/Home/img/fot1.png" alt="建站咨询"> <p>在线咨询</p> </a> </li> <li> <a href="tel:18980820575" target="_blank"> <img src="/Public/Home/img/fot2.png" alt="建站电话"> <p>拨打电话</p> </a> </li> </ul> </div> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>