这篇文章主要介绍React如何使用Hooks简化受控组件的状态绑定,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司坚信:善待客户,将会成为终身客户。我们能坚持多年,是因为我们一直可值得信赖。我们从不忽悠初访客户,我们用心做好本职工作,不忘初心,方得始终。十余年网站建设经验成都创新互联公司是成都老牌网站营销服务商,为您提供网站设计制作、成都做网站、网站设计、H5开发、网站制作、高端网站设计、微信小程序定制开发服务,给众多知名企业提供过好品质的建站服务。
ECMAScript 6
文章中大量用到了 ES6 语法,比如解构赋值和函数参数默认值、剩余参数、展开语法、箭头函数等。
Hooks
React 在 16.8 版本中推出了 Hooks,它允许你在“函数组件”中使用“类组件”的一些特性。
React 本身提供了一些 Hooks,比如 useState、useReducer 等。通过在一个以“use”作为命名起始的函数中调用这些 Hooks,就得到了一个 custom Hook(自定义 Hook)。
Custom Hooks 允许我们把任何逻辑封装到其中,以便于复用足够小的组件逻辑。
Controlled Components
当我们把像 <input> <textarea> 和 <select> 这样的 HTML 元素本身的状态交给 React state 去管理,我们就得到了一个“受控组件”。
styled-components
一个与 React 契合良好的 CSS in JS 库。它允许你使用 JS 编写样式,并编译成纯 CSS 文件。
下面代码中所有的样式都是使用它编写的。如果对代码中样式的实现不是很感兴趣的话, 这个可以跳过。
代码实现
Input 组件
首先我们需要实现一个 Input 组件,我们将在该组件的基础上进行输入、校验并提示。
Input.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;
该组件主要接收以下几个 props:
label label 标签的文本
type 赋值给原生 input 标签的 type 属性
error 数据类型为 Boolean,如果为 true 则表示当前表单域有错误,即验证不通过
helperText 当前表单域验证不通过时,显示在表单域下方的提示文字
otherProps props 中除了上述四个以外的其他属性,全部赋值给原生 input 标签
Custom Hook
有了 UI 组件之后,就可以开始实现我们的自定义 Hook 了。
useInput.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)); } } /** * 根据 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, }; }
useInput 接收一个 options 对象作为参数,考虑到扩展性,使用一个配置对象作为参数比较好。
options 对象拥有以下几个属性:
initValue 输入框的初始值
helperText 当表单验证不通过时显示的字符串
validator 用于进行表单验证的函数,接收 value 作为参数,并返回一个 Boolean 值,表示表单验证是否通过
validateTriggers 字符串数组,表明在哪个或哪几个事件中调用 validator 进行输入校验。
在函数体中,我们调用两次 useState 来初始化 value 和 error 的值,分别保存用户输入的值和当前表单域的校验结果。
然后,声明一个 onChange 方法用来绑定 input 元素的 change 事件,在该方法中,我们把用户输入的值赋值给 value,同时根据 validateTriggers 的值,决定是否要在该方法中进行输入校验。该方法随后会被返回出去,再作为 props 传递给相应的组件,完成受控组件的状态绑定。
我们还需要声明一个 createEventHandlers 方法,该方法通过遍历 validateTriggers,生成相应的事件处理器,并在这些事件处理器中进行输入校验。
最后我们调用 createEventHandlers 方法,并把生成的 eventHandlers(事件处理器) 通过扩展运算符,插入到最终返回的对象中。
注意:这里我们需要把 onChange 放在最后,以免带有状态绑定的 onChange 方法被 eventHandlers 中的 onChange 覆盖掉。
具体使用
现在让我们来看看实际该如何使用:
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> ); }
这里调用了两次 useInput,初始化 email 和 password 表单域数据。
然后使用扩展运算符,把值全部赋给 Input 组件。只用了几行代码就完成了定义初始值和受控组件的绑定,是不是很方便?
当我们输入邮箱的时候,并不会出现校验提示,但是一旦从邮箱输入框失去焦点以后,输入的值就会被校验,并根据校验结果显示相应的提示。而密码输入框,则会在输入的过程中和失焦后都进行校验。
以上是“React如何使用Hooks简化受控组件的状态绑定”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
新闻名称:React如何使用Hooks简化受控组件的状态绑定
路径分享:https://www.cdcxhl.com/article48/jsciep.html
成都网站建设公司_创新互联,为您提供定制开发、、网站设计、搜索引擎优化、网站建设、移动网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联