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

开始之前

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

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 去管理，我们就得到了一个“受控组件”。<br /> </p> <p><strong>styled-components</strong><br /> </p> <p>一个与 React 契合良好的 CSS in JS 库。它允许你使用 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 class="brush:js;"> 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>label label 标签的文本</li> <li>type 赋值给原生 input 标签的 type 属性</li> <li>error 数据类型为 Boolean，如果为 true 则表示当前表单域有错误，即验证不通过</li> <li>helperText 当前表单域验证不通过时，显示在表单域下方的提示文字</li> <li>otherProps props 中除了上述四个以外的其他属性，全部赋值给原生 input 标签</li> </ul> <p><strong>Custom Hook</strong><br /> </p> <p>有了 UI 组件之后，就可以开始实现我们的自定义 Hook 了。<br /> </p> <p>useInput.js<br /> </p> <pre class="brush:js;"> 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)); } } 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 对象作为参数，考虑到扩展性，使用一个配置对象作为参数比较好。<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 class="brush:js;"> 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 ( <Input {...email} label="邮箱" type="email" /> <Input {...password} label="密码" type="password" /> <button disabled={isButtonDisabled()} onClick={handleButtonClick}> 登录 </button> ); } </pre> <p>这里调用了两次 useInput，初始化 email 和 password 表单域数据。<br /> </p> <p>然后使用扩展运算符，把值全部赋给 Input 组件。只用了几行代码就完成了定义初始值和受控组件的绑定，是不是很方便？<br /> </p> <p>当我们输入邮箱的时候，并不会出现校验提示，但是一旦从邮箱输入框失去焦点以后，输入的值就会被校验，并根据校验结果显示相应的提示。而密码输入框，则会在输入的过程中和失焦后都进行校验。<br /> </p> <p><strong>总结</strong><br /> </p> <p>上面这个例子已经可以处理基本的表单验证，至于格式化用户输入的数据以及自定义收集表单域的值的时机等其他需求，我就不再演示了，大家可以自行设计。这也是 Hooks 的特殊之处，它让我们可以更容易的复用逻辑代码，可以根据需要自行编写 custom Hooks。<br /> </p> <p>文章中关于 useInput 的 API 设计只是众多方案中的一种，只是为大家提供一些参考。你也可以把整个表单的状态封装到一个 useForm 方法中，统一管理所有表单域的状态。<br /> </p> <p>希望本文能为大家带来一些关于如何使用 Hooks 的灵感，即使从来没有使用过 Hooks，也强烈建议大家尝试一下。我已经在项目中大量使用 Hooks 了，并且它也为我带来了很好的效果。</p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。</p></div> </div> <div style="clear: both;"></div> <div class="author-info fl"> <div><span class="gray">转载请注明：</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div> <div><span class="gray">本文地址：</span><a href="https://www.mshxw.com/it/76807.html" class="blue">https://www.mshxw.com/it/76807.html</a></div> </div> <div class="prev fl"> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/76847.html">上一篇微信小程序登录session的使用</a> </p> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/62716.html">下一篇在C++中关于友元函数的进一步理解</a> </p> </div> <div class="new_tag fl"> </div> </div> <div class="new_r fr" style="border-radius:10px;"> <div class="tui fl"> <h3>JavaScript相关栏目本月热门文章</h3> <ul> <li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解（二）设备树语法详解">【Linux驱动开发】设备树详解（二）设备树语法详解</a></li> <li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li> <li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li> <li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流（ObjectOutputStream和ObjectInputStream）">【Java】对象处理流（ObjectOutputStream和ObjectInputStream）</a></li> <li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li> <li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li> <li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍</a></li> <li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成</a></li> <li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li> <li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li> <li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li> <li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li> <li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号符号: 变量 log 2、转换成Maven项目</a></li> <li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口（包含C uci操作）">在openwrt使用C语言增加ubus接口（包含C uci操作）</a></li> <li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li> <li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li> <li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li> <li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li> <li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li> <li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li> </ul> </div> </div> </div>  <div class="link main"> <div class="link_tit"> <span class="on">热门相关搜索</span> </div> <div class="link_tab"> <div class="link_con"> <a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a> <a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a> <a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a> <a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a> <a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a> <a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a> <a href="http://www.mshxw.com/TAG_1/vim.html">vim</a> <a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a> <a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a> <a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a> <a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a> <a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a> <a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a> <a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a> <a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a> <a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a> <a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a> <a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a> <a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a> <a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a> <a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a> <a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a> <a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a> <a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a> <a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a> </div> </div> </div> <div class="footer"> <div class="dl_con"> <div class="width1200"> <dl> <dt>学习工具</dt> <dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd> <dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd> <dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd> <dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd> </dl> <dl> <dt>知识解答</dt> <dd><a href="https://www.mshxw.com/ask/1033/" title="教育知识">教育知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1180/" title="百科知识">百科知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1155/" title="生活知识">生活知识</a></dd> <dd><a class="https://www.mshxw.com/ask/1199/" title="常识知识">常识知识</a></dd> </dl> <dl> <dt>写作必备</dt> <dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd> </dl> <dl class="mr0"> <dt>关于我们</dt> <dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd> <dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd> <dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd> </dl> <div class="dl_ewm"> <div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群"> <p>名师互学网交流群</p> </div> <div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服"> <p>名师互学网客服</p> </div> </div> </div> </div> <div class="copyright"> <p>名师互学网版权所有 (c)2021-2022 ICP备案号：<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a> </p> </div> </div>  <div class="m_foot_top"> <img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/> <a href="https://www.mshxw.com/about/index.html">关于我们</a> <a href="https://www.mshxw.com/archiver/">文章归档</a> <a href="https://www.mshxw.com/sitemap">网站地图</a> <a href="https://www.mshxw.com/about/contact.html">联系我们</a> <p>版权所有 (c)2021-2022 MSHXW.COM</p> <p>ICP备案号：<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p> </div> <div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div>  <script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script> <script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script>  <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </div> <script type="text/javascript"> $(".alert_kf").click(function() { mantis.requestChat(); }); </script> <script type="text/javascript"> var mySwiper_weixin = new Swiper('.pc_swiper_weixin', { autoplay: 3000, //可选选项，自动滑动 loop: true, speed: 1000, pagination: '.swiper-pagination', paginationClickable: true, }) </script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() > 100) { $(".to_top").fadeIn(1000); } else { $(".to_top").fadeOut(1000); } }); $(".to_top").click(function() { if ($('html').scrollTop()) { $('html').animate({ scrollTop: 0 }, 300); return false; } $('body').animate({ scrollTop: 0 }, 300); return false; }); }); </script> </body> </html>