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://kswsj.com/article/jsciep.html">http://kswsj.com/article/jsciep.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dcoissi.html">包含sap系统供应商清帐代码的词条</a> </li><li> <a href="/article/dcoissc.html">关闭腾讯云服务器防火墙 腾讯云防火墙端口</a> </li><li> <a href="/article/dcoiseo.html">abc算法java代码 java中abcd是什么类型</a> </li><li> <a href="/article/dcoisss.html">腾讯云服务器上开通端口 腾讯云开启端口6379</a> </li><li> <a href="/article/dcoichg.html">腾讯云服务器linux系统 腾讯云服务器linux系统怎么样</a> </li> </ul> </div> </div> <!-- end #bd --> <div class="c"></div> <!-- begin #fd --> <div id="fd" class="index-fd pr"> <div class="map-bg3"></div> <div class="wp"> <div class="fd-top"> <dl> <dt>关于我们</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.kswsj.com/about#whous">我们是谁</a></li> <li><a href="http://www.kswsj.com/about#ourcus">我们服务的客户</a></li> <li><a href="http://www.kswsj.com/about#ourteam">我们的团队</a></li> </ul> </dd> </dl> <dl> <dt>我们的服务</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.kswsj.com/service#webbuit">网站建设</a></li> <li><a href="http://www.kswsj.com/service#weiweb">H5响应式 交互网站</a></li> <li><a href="http://www.kswsj.com/service#webmobel">移动端 & 微网站定制</a></li> <li><a href="http://www.kswsj.com/service#servweb">服务流程</a></li> <li><a href="http://www.kswsj.com/service#solution">行业解决方案</a></li> </ul> </dd> </dl> <dl> <dt>网站建设案例</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.kswsj.com/case/">公司集团</a></li> <li><a href="http://www.kswsj.com/case/">数码电子科技</a></li> <li><a href="http://www.kswsj.com/case/">建筑与设计</a></li> <li><a href="http://www.kswsj.com/case/">安防门禁</a></li> <li><a href="http://www.kswsj.com/case/">管理咨询美容</a></li> <li><a href="http://www.kswsj.com/case/">外贸行业</a></li> </ul> </dd> </dl> <dl> <dt>新闻动态</dt> <dd> <ul class="ul-fd"> <li><a href="/news/2.html">成都网站建设</a></li><li><a href="/news/3.html">成都网站制作</a></li><li><a href="/news/4.html">成都网站设计</a></li> </ul> </dd> </dl> <dl> <dt>联系我们</dt> <dd class="pr"> <p><a href="http://www.kswsj.com/news/" class="weixin"></a><a href="http://www.kswsj.com/news/" class="sina"></a><span class="weixin-pic"><img src="/Public/Home/pic/ewm.jpg"></span></p> <p><b class="tel">135-1821-9792</b></p> <h5>公司服务热线</h5> </dd> </dl> </div> <div class="link"> 友情链接： <a href="https://www.cdxwcx.com/wangzhan/h5.html" title="h5页面制作" target="_blank">h5页面制作</a>   <a href="http://www.cdkjz.cn/fangan/energy/" title="节能环保网站建设方案" target="_blank">节能环保网站建设方案</a>   <a href="http://www.cdhuace.com/huace.html" title="成都画册制作" target="_blank">成都画册制作</a>   <a href="http://chengdu.cdcxhl.com/weixin/" title="微信公众号二次开发" target="_blank">微信公众号二次开发</a>   <a href="https://www.cdcxhl.com/seo.html" title="成都网站营销" target="_blank">成都网站营销</a>   <a href="https://www.cdcxhl.com/ssl/https.html" title="ssl证书申请" target="_blank">ssl证书申请</a>   <a href="http://chengdu.cdxwcx.cn/" title="成都网站设计" target="_blank">成都网站设计</a>   <a href="https://www.cdxwcx.com/400/" title="成都400电话" target="_blank">成都400电话</a>   <a href="http://www.cdhuace.com/logo.html" title="公司logo设计" target="_blank">公司logo设计</a>   <a href="http://www.cdhcym.com/" title="鸿程源茂" target="_blank">鸿程源茂</a>    </div> </div> <div class="fd-copy"> <div class="wp"> <p><span style="color:#CCCCCC;">Copyright © 2009-2022 www.kswsj.com 成都快上网科技有限公司 版权所有</span>　<a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow" style="color:#CCCCCC;">蜀ICP备19037934号</a></p> </div> </div> </div> <div class="side"> <ul> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank"> <div class="sidebox"><img src="/Public/Home/pic/side_icon02.png">在线咨询</div> </a></li> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank"> <div class="sidebox"><img src="/Public/Home/pic/side_icon01.png">在线咨询</div> </a></li> <li><a href="tel:135-1821-9792"> <div class="sidebox"><img src="/Public/Home/pic/side_icon03.png"><span style="font-size:14px">135-1821-9792</span></div> </a></li> </ul> </div> <div class="side2"> <ul> <li><a href="http://www.kswsj.com/news/"><img src="/Public/Home/pic/r_icon1.png" alt="成都网站建设"></a> <div class="weixin"><em></em><img src="/Public/Home/pic/ewm.jpg" alt="成都网站建设"></div> </li> <li><a href="javascript:goTop();" class="sidetop"><img src="/Public/Home/pic/r_icon2.png"></a></li> </ul> </div> <div class="fot"> <ul> <li> <a href="https://p.qiao.baidu.com/cps/mobileChat?siteId=11284691&userId=6256368&type=1&reqParam=%20{%22from%22:0,%22sessionid%22:%22%22,%22siteId%22:%2211284691%22,%22tid%22:%22-1%22,%22userId%22:%226256368%22,%22ttype%22:1,%22siteConfig%22:%20{%22eid%22:%226256368%22,%22queuing%22:%22%22,%22siteToken%22:%226ce441ff9e2d6bedbdfc2a4138de449e%22,%22userId%22:%226256368%22,%22isGray%22:%22false%22,%22wsUrl%22:%22wss://p.qiao.baidu.com/cps3/websocket%22,%22likeVersion%22:%22generic%22,%22siteId%22:%2211284691%22,%22online%22:%22true%22,%22webRoot%22:%22//p.qiao.baidu.com/cps3/%22,%22bid%22:%22160142915792139572%22,%22isSmallFlow%22:0,%22isPreonline%22:0,%22invited%22:0%20},%22config%22:%20{%22themeColor%22:%224d74fa%22%20}%20}&appId=&referer=&iswechat=0&expectWaiter=-1&openid=null&otherParam=null&telephone=null&speedLogId=null&eid=null&siteToken=6ce441ff9e2d6bedbdfc2a4138de449e" target="_blank"> <img src="/Public/Home/pic/fot1.png" alt=""> <p>在线咨询</p> </a> </li> <li> <a href="tel:18980820575" target="_blank"> <img src="/Public/Home/pic/fot2.png" alt=""> <p>拨打电话</p> </a> </li> </ul> </div> <script type="text/javascript" src="/Public/Home/pic/jquery.js"></script> <script type="text/javascript" src="/Public/Home/pic/lib.js"></script> </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>