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

2023-08-25 19:27:04 70

开始之前

阅读本文需要对以下几项有一定了解

ECMAScript6

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

Hooks

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

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

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

ControlledComponents

当我们把像和<select>这样的HTML元素本身的状态交给Reactstate去管理，我们就得到了一个“受控组件”。<br/> </p> <p><strong>styled-components</strong><br/> </p> <p>一个与React契合良好的CSSinJS库。它允许你使用JS编写样式，并编译成纯CSS文件。<br/> 下面代码中所有的样式都是使用它编写的。如果对代码中样式的实现不是很感兴趣的话,这个可以跳过。<br/> </p> <p><strong>代码实现</strong><br/> </p> <p><strong>Input组件</strong><br/> </p> <p>首先我们需要实现一个Input组件，我们将在该组件的基础上进行输入、校验并提示。<br/> </p> <p>Input.js<br/> </p> <pre> importReactfrom'react'; importPropTypesfrom'prop-types'; importstyledfrom'styled-components'; constWrap=styled.div({ display:'flex', flexDirection:'column', label:{display:'flex',alignItems:'center'}, input:{ marginLeft:8, }, p:{ color:'red', }, }); functionInput({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, }; exportdefaultInput; </pre> <p>该组件主要接收以下几个props：</p> <ul> <li>labellabel标签的文本</li> <li>type赋值给原生input标签的type属性</li> <li>error数据类型为Boolean，如果为true则表示当前表单域有错误，即验证不通过</li> <li>helperText当前表单域验证不通过时，显示在表单域下方的提示文字</li> <li>otherPropsprops中除了上述四个以外的其他属性，全部赋值给原生input标签</li> </ul> <p><strong>CustomHook</strong><br/> </p> <p>有了UI组件之后，就可以开始实现我们的自定义Hook了。<br/> </p> <p>useInput.js<br/> </p> <pre> import{useState}from'react'; exportdefaultfunctionuseInput({ initValue='', helperText='', validator=()=>true, validateTriggers=['onChange'], }={}){ //保存用户输入的值，使用initValue作为初始值 const[value,setValue]=useState(initValue); //Boolean类型，表示当前表单项的验证状态 const[error,setError]=useState(false); functiononChange(e){ const{value}=e.target; setValue(value); //根据validateTriggers的选项，决定是否要在onChange里进行校验 if(validateTriggers.includes('onChange')){ setError(!validator(value)); } } /** *根据validateTriggers生成相应的事件处理器 */ functioncreateEventHandlers(){ consteventHandlers={}; validateTriggers.forEach(item=>{ //生成相应的事件处理器，并在其中做输入校验。 eventHandlers[item]=e=>{ const{value}=e.target; setError(!validator(value)); }; }); returneventHandlers; } consteventHandlers=createEventHandlers(); return{ value, helperText, error, ...eventHandlers, onChange, }; } </pre> <p>useInput接收一个options对象作为参数，考虑到扩展性，使用一个配置对象作为参数比较好。<br/> </p> <p>options对象拥有以下几个属性：</p> <ul> <li>initValue输入框的初始值</li> <li>helperText当表单验证不通过时显示的字符串</li> <li>validator用于进行表单验证的函数，接收value作为参数，并返回一个Boolean值，表示表单验证是否通过</li> <li>validateTriggers字符串数组，表明在哪个或哪几个事件中调用validator进行输入校验。</li> </ul> <p>在函数体中，我们调用两次useState来初始化value和error的值，分别保存用户输入的值和当前表单域的校验结果。<br/> 然后，声明一个onChange方法用来绑定input元素的change事件，在该方法中，我们把用户输入的值赋值给value，同时根据validateTriggers的值，决定是否要在该方法中进行输入校验。该方法随后会被返回出去，再作为props传递给相应的组件，完成受控组件的状态绑定。<br/> </p> <p>我们还需要声明一个createEventHandlers方法，该方法通过遍历validateTriggers，生成相应的事件处理器，并在这些事件处理器中进行输入校验。<br/> </p> <p>最后我们调用createEventHandlers方法，并把生成的eventHandlers（事件处理器）通过扩展运算符，插入到最终返回的对象中。</p> <p>注意：这里我们需要把onChange放在最后，以免带有状态绑定的onChange方法被eventHandlers中的onChange覆盖掉。</p> <p><strong>具体使用<br/> </strong></p> <p>现在让我们来看看实际该如何使用：<br/> </p> <pre> importReactfrom'react'; importInputfrom'./Input'; importuseInputfrom'./useInput'; //用于验证邮箱的正则表达式 constEMAIL_REG=/\S+@\S+\.\S+/; exportdefaultfunctionForm(){ constemail=useInput({ initValue:'', helperText:'请输入有效的邮箱！', validator:value=>EMAIL_REG.test(value), validateTriggers:['onBlur'], }); constpassword=useInput({ initValue:'', helperText:'密码长度需要在6-20之间！', validator:value=>value.length>=6&&value.length<=20, validateTriggers:['onChange','onBlur'], }); /** *判断是否禁用按钮 */ functionisButtonDisabled(){ //当邮箱或密码未填写时，或者邮箱或密码输入校验未通过时，禁用按钮 return!email.value||!password.value||email.error||password.error; } /** *处理表单提交 */ functionhandleButtonClick(){ console.log('邮箱：',email.value); console.log('密码：',password.value); } return( <div> <Input{...email}label="邮箱"type="email"/> <Input{...password}label="密码"type="password"/> <buttondisabled={isButtonDisabled()}onClick={handleButtonClick}> 登录 </button> </div> ); } </pre> <p>这里调用了两次useInput，初始化email和password表单域数据。<br/> </p> <p>然后使用扩展运算符，把值全部赋给Input组件。只用了几行代码就完成了定义初始值和受控组件的绑定，是不是很方便？<br/> </p> <p>当我们输入邮箱的时候，并不会出现校验提示，但是一旦从邮箱输入框失去焦点以后，输入的值就会被校验，并根据校验结果显示相应的提示。而密码输入框，则会在输入的过程中和失焦后都进行校验。<br/> </p> <p><strong>总结</strong><br/> </p> <p>上面这个例子已经可以处理基本的表单验证，至于格式化用户输入的数据以及自定义收集表单域的值的时机等其他需求，我就不再演示了，大家可以自行设计。这也是Hooks的特殊之处，它让我们可以更容易的复用逻辑代码，可以根据需要自行编写customHooks。<br/> </p> <p>文章中关于useInput的API设计只是众多方案中的一种，只是为大家提供一些参考。你也可以把整个表单的状态封装到一个useForm方法中，统一管理所有表单域的状态。<br/> </p> <p>希望本文能为大家带来一些关于如何使用Hooks的灵感，即使从来没有使用过Hooks，也强烈建议大家尝试一下。我已经在项目中大量使用Hooks了，并且它也为我带来了很好的效果。</p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。</p></section> </div> </div>  <nav> <span class="meta-nav"><a href="/article/193826.html" title="MySQL开启慢查询日志功能的方法" se_prerender_url="complete">上一篇<br>MySQL开启慢查询日志功能的方法</a></span> <span class="meta-nav"><a href="/article/193823.html" title="ASP.NET Core中预压缩静态文件的方法步骤" se_prerender_url="complete">下一篇<br>ASP.NET Core中预压缩静态文件的方法步骤</a></span> <div class="clear"></div> </nav>  <div class="article-recommend"> <h3>热门推荐</h3> <div class="title"><span class="s-1">1</span> <a href="/article/10835.html" title="毛坯房验收经验和常识看了之后再验房心里有底">毛坯房验收经验和常识看了之后再验房心里有底</a></div> <div class="title"><span class="s-2">2</span> <a href="/article/10697.html" title="二手房收房如何交接二手房收房注意问题">二手房收房如何交接二手房收房注意问题</a></div> <div class="title"><span class="s-3">3</span> <a href="/article/10605.html" title="专业验收毛坯房的价格商品房验收合格的标准">专业验收毛坯房的价格商品房验收合格的标准</a></div> <div class="title"><span class="s-4">4</span> <a href="/article/10568.html" title="精装房怎么验收精装房请验房师有用吗">精装房怎么验收精装房请验房师有用吗</a></div> <div class="title"><span class="s-5">5</span> <a href="/article/10567.html" title="一般要到哪里找验房师验房师有哪些作用呢">一般要到哪里找验房师验房师有哪些作用呢</a></div> <div class="title"><span class="s-6">6</span> <a href="/article/10566.html" title="请人验房一般是多少钱验房师费用是多少">请人验房一般是多少钱验房师费用是多少</a></div> <div class="title"><span class="s-7">7</span> <a href="/article/10553.html" title="怎样测量房子面积建筑面积和使用面积怎么算">怎样测量房子面积建筑面积和使用面积怎么算</a></div> <div class="title"><span class="s-8">8</span> <a href="/article/10550.html" title="收房需要注意什么仔细检查不松懈">收房需要注意什么仔细检查不松懈</a></div> <div class="title"><span class="s-9">9</span> <a href="/article/10548.html" title="收房时三书一证一表是什么主要作用介绍">收房时三书一证一表是什么主要作用介绍</a></div> <div class="title"><span class="s-10">10</span> <a href="/article/10547.html" title="交房时交房税费有哪些本文为你一一讲解">交房时交房税费有哪些本文为你一一讲解</a></div> <div class="title"><span class="s-11">11</span> <a href="/article/10526.html" title="验房都需要验什么要做哪些准备呢">验房都需要验什么要做哪些准备呢</a></div> <div class="title"><span class="s-12">12</span> <a href="/article/10525.html" title="毛坯房验房师有必要请吗毛坯房装修完如何验收">毛坯房验房师有必要请吗毛坯房装修完如何验收</a></div> <div class="title"><span class="s-13">13</span> <a href="/article/7820.html" title="地下室防水工程质量验收规范详解">地下室防水工程质量验收规范详解</a></div> <div class="title"><span class="s-14">14</span> <a href="/article/4947.html" title="水性涂料、油性涂料区别介绍">水性涂料、油性涂料区别介绍</a></div> <div class="title"><span class="s-15">15</span> <a href="/article/4517.html" title="零基础布艺DIY工坊教你做超萌猫头鹰钥匙包">零基础布艺DIY工坊教你做超萌猫头鹰钥匙包</a></div> <div class="title"><span class="s-16">16</span> <a href="/article/4438.html" title="三棵树漆怎么样？三棵树漆官方网站">三棵树漆怎么样？三棵树漆官方网站</a></div> <div class="title"><span class="s-17">17</span> <a href="/article/4258.html" title="家庭“装修套餐”中猫腻你知道吗？">家庭“装修套餐”中猫腻你知道吗？</a></div> <div class="title"><span class="s-18">18</span> <a href="/article/4051.html" title="小空间大浴望卫浴间装修巧支招">小空间大浴望卫浴间装修巧支招</a></div> </div> <div class="add-gg">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="9131157744" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <div id="sidebar"> <li class="sidebar-box"> <h3 class="widget-title">随机推荐</h3> <ul> <li> <a href="/article/68429.html" title="北海自由行旅游攻略">北海自由行旅游攻略</a> </li> <li> <a href="/article/68430.html" title="三证合一的办理流程">三证合一的办理流程</a> </li> <li> <a href="/article/68431.html" title="去一趟日本旅游要多少钱">去一趟日本旅游要多少钱</a> </li> <li> <a href="/article/68432.html" title="愚人节礼物推荐愚人节适合送什么">愚人节礼物推荐愚人节适合送什么</a> </li> <li> <a href="/article/68433.html" title="新版TCL智能电视安装第三方软件的方法">新版TCL智能电视安装第三方软件的方法</a> </li> <li> <a href="/article/68434.html" title="番号怎么用">番号怎么用</a> </li> <li> <a href="/article/68435.html" title="微信摇一摇抢红包怎么玩，微信摇一摇抢红包攻略">微信摇一摇抢红包怎么玩，微信摇一摇抢红包攻略</a> </li> <li> <a href="/article/68436.html" title="变频电机与普通电机的区别有哪些？">变频电机与普通电机的区别有哪些？</a> </li> <li> <a href="/article/68437.html" title="男士休闲西服搭配方法小解">男士休闲西服搭配方法小解</a> </li> <li> <a href="/article/68438.html" title="元旦表演什么节目好">元旦表演什么节目好</a> </li> <li> <a href="/article/68439.html" title="裸捐是什么意思">裸捐是什么意思</a> </li> <li> <a href="/article/68441.html" title="如何写好一个通讯稿">如何写好一个通讯稿</a> </li> <li> <a href="/article/68442.html" title="笑气算是毒品吗">笑气算是毒品吗</a> </li> <li> <a href="/article/68443.html" title="大年初三是个什么日子？">大年初三是个什么日子？</a> </li> <li> <a href="/article/68444.html" title="南海西樵山旅游攻略">南海西樵山旅游攻略</a> </li> <li> <a href="/article/68445.html" title="最全最真最走心的上海迪士尼乐园游玩攻略">最全最真最走心的上海迪士尼乐园游玩攻略</a> </li> </ul> </li> <li class="sidebar-box">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="8604338277" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> </div> </div> </div> <ul class="suspend"> <li class="back-top" onclick="backTop()"> <i class="fa fa-chevron-up"></i> <span class="more">返回顶部</span> </li> <li> <a href="http://wpa.qq.com/msgrd?v=3&uin=514930285&site=qq&menu=yes"> <i class="fa fa-qq"></i> <span class="more">514930285</span> </a> </li> <li> <a href="mailto:czq8825@qq.com"> <i class="fa fa-envelope"></i> <span class="more">czq8825@qq.com</span> </a> </li>  </ul> <footer class="footer clearfix"> <p>免责声明：网站资源来源于网络，如有侵权，请及时联系删除。</p> <p>Copyright © 2024 <a href="/">好资源导航网</a>. All Rights Reserved.</p> <p> <a href="https://beian.miit.gov.cn">蜀ICP备2021004611号-4</a> <a href="/sitemap.html">网站地图</a> <script> !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"JkYxq0Tbzm6jhVv6",ck:"JkYxq0Tbzm6jhVv6"}); </script> </p> </footer> <script src="/Public/Home/js/main.js"></script> <script type="text/javascript" src="/Public/Home/js/z_stat.js"></script> </body> </html>