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://dzwzjz.com/article/jsciep.html">http://dzwzjz.com/article/jsciep.html</a> </div> </div> <div class="othernews"> <h3>其他资讯</h3> <div class="othernews_list"> <ul> <li> <a href="/article/dopiioo.html">ChatGPT访问拒绝 chkdsk f x c访问被拒绝</a> </li><li> <a href="/article/dopiics.html">智能聊天取代作家 智能聊天会取代程序员吗</a> </li><li> <a href="/article/dopiejj.html">web服务器安全有关措施 详述web服务安全设置有哪些关键要素?</a> </li><li> <a href="/article/dopiegh.html">GIS技术学院专业分数 gis学校</a> </li><li> <a href="/article/dopiice.html">最新编程语言排行榜go 最新编程语言排行榜</a> </li> </ul> </div> </div> </div> </div> <div class="footer"> <div class="footer_content"> <div class="footer_content_top clear"> <div class="content_top_share fl"> <div><img src="/Public/Home/img/logo.png"></div> <div class="top_share_content"> <dd>分享至：</dd> <dt class="bdsharebuttonbox clear" id="share"> <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a> </dt> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> </div> <div class="content_top_left fl clear"> <div class="top_left_list fl"> <dd><a href="/about/">关于我们</a></dd> <dt> <a href="/about/#gsjj">公司简介</a> <a href="/about/#fzlc">发展历程</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/service/">服务项目</a></dd> <dt> <a href="/service/">高端网站建设</a> <a href="/miniprogram/">小程序开发</a> <a href="/service/app.html">APP开发</a> <a href="/service/yingxiao.html">网络营销</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/jianzhan/">建站知识</a></dd> <dt> <a href="/jianzhan/">行业新闻</a> <a href="/jianzhan/">建站学堂</a> <a href="/jianzhan/">常见问题</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/contact/">联系我们</a></dd> <dt> <a href="/contact/#lxwm">公司地址</a> <a href="/contact/#rczp">人才招聘</a> </dt> </div> </div> <div class="content_top_right addressR fr"> <div class="top_right_title addressf_title"> <a href="javascript:;" class="on">成都</a> <a href="javascript:;">达州</a> </div> <div class="top_right_content addressf"> <div class="right_content_li on"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt> </div> </div> <div class="right_content_li"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：达州市南岸区弹子石腾龙大道58号2栋21-6</dt> </div> </div> </div> </div> </div> <div class="link"> 友情链接： <a href="http://www.yfrsc.cn/" title="成都圣月制冷" target="_blank">成都圣月制冷</a>   <a href="https://www.cdcxhl.cn/ " title="网站空间" target="_blank">网站空间</a>   <a href="http://www.cdhcym.com/" title="鸿程源茂" target="_blank">鸿程源茂</a>   <a href="http://www.cdxwcx.cn/sheji/" title="成都网站设计" target="_blank">成都网站设计</a>   <a href="https://www.cdcxhl.com/yunying.html" title="网站改版维护" target="_blank">网站改版维护</a>   <a href="http://www.cdhuace.com/zhangui.html" title="成都展柜厂" target="_blank">成都展柜厂</a>   <a href="http://www.cdjbgc.com/" title="成都搅拌罐车" target="_blank">成都搅拌罐车</a>   <a href="https://www.cdcxhl.com/h5.html" title="响应式网站" target="_blank">响应式网站</a>   <a href="http://www.zgyiwo.cn/" title="普特斯腐植酸" target="_blank">普特斯腐植酸</a>   <a href="https://www.cdcxhl.com/seo/chengdu.html" title="四川成都seo网站优化" target="_blank">四川成都seo网站优化</a>    </div> </div> <div class="footer_content_copyright clear">版权所有：青羊区大橙子信息咨询工作室 <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">蜀ICP备2022028542号-14</a> </div> </div> <!--浮窗--> <div class="FloatingWindow clear"> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt><span>在线</span>咨询</dt> </div> </a> <a href="javascript:;" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>服务热线</dt> </div> <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div> </a> <a href="javascript:;" class="FloatingWindow_list fr STop"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>TOP</dt> </div> </a> </div> <script src="/Public/Home/js/jquery-1.8.3.min.js"></script> <script src="/Public/Home/js/comm.js"></script> <script src="/Public/Home/js/wow.js"></script> <script src="/Public/Home/js/common.js"></script> </body> </html> <script> $(".cont 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>