React如何使用Hooks简化受控组件的状态绑定-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

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> 标题URL：<a href="http://www.jxjierui.cn/article/jsciep.html">http://www.jxjierui.cn/article/jsciep.html</a> </div> <div class="hot_new"> <div class="page_title clearfix"> <h3>其他资讯</h3> </div> <div class="news_list clearfix"> <ul> <li> <a href="/article/djjigco.html">2U标准服务器尺寸参数？2u服务器多少钱一个</a> </li><li> <a href="/article/djjigcd.html">如何调出皮肤色的染料?</a> </li><li> <a href="/article/djjiihi.html">手机为什么收不到信息栏</a> </li><li> <a href="/article/djjiipi.html">双核云服务器租用要多少钱</a> </li><li> <a href="/article/djjigdh.html">在被12306坑之后我们聊聊验证码发展史</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>  <div class="footer wow fadeInUp"> <div class="rowFluid"> <div class="span12"> <div class="container"> <div class="footer_content"> <div class="span4 col-xm-12"> <div class="footer_list"> <div class="span6"> <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div> </div> <div class="span6 col-xm-12"> <div class="quick_navigation"> <div class="quick_navigation_title">快速导航</div> <ul> <li><a href="http://www.cdkjz.cn/fangan/" title="企业网站设计" target="_blank">企业网站设计</a></li><li><a href="http://www.lqfdjxw.com/" title="龙泉发电机维修" target="_blank">龙泉发电机维修</a></li><li><a href="https://www.cdcxhl.com/xiaochengx.html" title="成都小程序开发" target="_blank">成都小程序开发</a></li><li><a href="http://www.kswcd.com/" title="企业网站设计" target="_blank">企业网站设计</a></li><li><a href="http://www.cdxwcx.cn/bj/" title="做网站价格" target="_blank">做网站价格</a></li><li><a href="http://www.sjmingpian.com/" title="印刷名片" target="_blank">印刷名片</a></li><li><a href="http://www.bwuyu.cn/" title="白乌鱼鱼苗" target="_blank">白乌鱼鱼苗</a></li> </ul> </div> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_link"> <div class="footer_link_title">友情链接</div> <ul id="frientLinks"> <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a> <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a> <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a> <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a> </ul> <div class="footer_link_title">网站建设</div> <ul id="frientLinks"> <li><a href="/">内江浩晨众云建站</a></li> <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li> </ul> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_cotact"> <div class="footer_cotact_title">联系方式</div> <ul> <li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">青羊区浩晨众云设计工作室（个体工商户）</span></li> <li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li> <li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li> <li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="内江网站建设">www.jxjierui.cn</a></span></li> </ul> </div> </div> </div> </div> </div> <div class="copyright"> <p>公司名称：青羊区浩晨众云设计工作室（个体工商户）联系电话：18980820575</p> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号：蜀ICP备2025119795号-2</a></p> <p>内江浩晨众云建站内江网站建设内江网站设计内江网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p> </div> </div> </div> </div> </body> </html> <script> $(".technical_support_box_z_info_box 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>