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

这篇文章主要介绍了React 使用Hooks简化受控组件的状态绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

开始之前

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

ECMAScript 6

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

Hooks

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

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

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

Controlled Components

当我们把像 和 这样的 HTML 元素本身的状态交给 React state 去管理，我们就得到了一个“受控组件”。</p> <p><strong>styled-components</strong></p> <p>一个与 React 契合良好的 CSS in JS 库。它允许你使用 JS 编写样式，并编译成纯 CSS 文件。<br /> 下面代码中所有的样式都是使用它编写的。如果对代码中样式的实现不是很感兴趣的话, 这个可以跳过。</p> <p><span style="color: #ff0000"><strong>代码实现</strong></span></p> <p><strong>Input 组件</strong></p> <p>首先我们需要实现一个 Input 组件，我们将在该组件的基础上进行输入、校验并提示。</p> <p>Input.js</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 ( <label> {label}: </label> {error && <p>{helperText}</p>} ); } 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></p> <p>有了 UI 组件之后，就可以开始实现我们的自定义 Hook 了。</p> <p>useInput.js</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)); } } /** * 根据 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>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 传递给相应的组件，完成受控组件的状态绑定。</p> <p>我们还需要声明一个 createEventHandlers 方法，该方法通过遍历 validateTriggers，生成相应的事件处理器，并在这些事件处理器中进行输入校验。</p> <p>最后我们调用 createEventHandlers 方法，并把生成的 eventHandlers（事件处理器） 通过扩展运算符，插入到最终返回的对象中。</p> <p>注意：这里我们需要把 onChange 放在最后，以免带有状态绑定的 onChange 方法被 eventHandlers 中的 onChange 覆盖掉。</p> <p><span style="color: #ff0000"><strong>具体使用<br /></strong></span></p> <p>现在让我们来看看实际该如何使用：</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 ( <button disabled="{isButtonDisabled()}"> 登录 </button> ); } </pre> <p>这里调用了两次 useInput，初始化 email 和 password 表单域数据。</p> <p>然后使用扩展运算符，把值全部赋给 Input 组件。只用了几行代码就完成了定义初始值和受控组件的绑定，是不是很方便？</p> <p>当我们输入邮箱的时候，并不会出现校验提示，但是一旦从邮箱输入框失去焦点以后，输入的值就会被校验，并根据校验结果显示相应的提示。而密码输入框，则会在输入的过程中和失焦后都进行校验。</p> <p><span style="color: #ff0000"><strong>总结</strong></span></p> <p>上面这个例子已经可以处理基本的表单验证，至于格式化用户输入的数据以及自定义收集表单域的值的时机等其他需求，我就不再演示了，大家可以自行设计。这也是 Hooks 的特殊之处，它让我们可以更容易的复用逻辑代码，可以根据需要自行编写 custom Hooks。</p> <p>文章中关于 useInput 的 API 设计只是众多方案中的一种，只是为大家提供一些参考。你也可以把整个表单的状态封装到一个 useForm 方法中，统一管理所有表单域的状态。</p> <p>希望本文能为大家带来一些关于如何使用 Hooks 的灵感，即使从来没有使用过 Hooks，也强烈建议大家尝试一下。我已经在项目中大量使用 Hooks 了，并且它也为我带来了很好的效果。</p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。</p> <p>以上就是React 使用Hooks简化受控组件的状态绑定的详细内容，更多请关注本站其它相关文章！</p> </div> <div class="down" id="down"> <div class="downl"> <p><b>《React 使用Hooks简化受控组件的状态绑定.doc》</b></p> <p>下载本文的Word格式文档，以方便收藏与打印。</p> </div> <div class="downr"> <input type="button" class="dinput" value="导出WORD"> </div> </div> </div> <ul class="ul-list"> <li> <ins class="adsbygoogle" style="display:inline-block;width:100%;height:120px" data-ad-client="ca-pub-6278534685681362" data-ad-slot="4967365039"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> <h3 class="sidebar_title indexnew">相关推荐</h3> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/869676.html"><h6>Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/869676.html"><img src="https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg" alt="Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?"></a></div> <div class="news-info"> <p>在 vue 中,默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。但是 vue 提供了 keep-alive 组件,它可以将一个...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-08-24<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/933/" rel="tag">搭配</a>,<a href="https://kunjuke.com/tag/934/" rel="tag">状态</a>,<a href="https://kunjuke.com/tag/1821/" rel="tag">缓存</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/869322.html"><h6>element-ui Tabs 标签页刷新页面状态不丢失</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/869322.html"><img src="https://www.kunjuke.com/file/css/thumb/11.jpg/280-180.jpg" alt="element-ui Tabs 标签页刷新页面状态不丢失"></a></div> <div class="news-info"> <p>element-ui Tabs 标签页刷新页面状态不丢失 转载请表明出处 https://www.cnblogs.com/niexianda/p/14765111.html 效果 一般在使用Tabs组件，我们选择了标签2后刷新，tab组件会重新回到标签1，每次都需要在刷...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-08-01<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/16088/" rel="tag">丢失</a>,<a href="https://kunjuke.com/tag/1347/" rel="tag">刷新</a>,<a href="https://kunjuke.com/tag/934/" rel="tag">状态</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/868819.html"><h6>Unity Jobsystem 详解实体组件系统ECS</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/868819.html"><img src="https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg" alt="Unity Jobsystem 详解实体组件系统ECS"></a></div> <div class="news-info"> <p>原文摘选自Unity Jobsystem 详解实体组件系统ECS 简介 随着ECS的加入，Unity基本上改变了软件开发方面的大部分方法。ECS的加入预示着OOP方法的结束。随着实体组件系统ECS的到来，我们在Unity开发中曾使用的大量实...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-07-30<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/110125/" rel="tag">实体</a>,<a href="https://kunjuke.com/tag/3947/" rel="tag">组件</a>,<a href="https://kunjuke.com/tag/145/" rel="tag">详解</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/868652.html"><h6>C#自行实现安装卸载程序（不使用官方组件）</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/868652.html"><img src="https://www.kunjuke.com/file/css/thumb/2.jpg/280-180.jpg" alt="C#自行实现安装卸载程序（不使用官方组件）"></a></div> <div class="news-info"> <p>正规软件建议还是使用官方的标准安装程序组件，因为官方的标准安装/卸载组件能更好的与操作系统衔接，安装和卸载流程更加规范。 今天提供一种野路子，全用代码实现安装卸载器。 需要写一个程序，包含安装器、卸载...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-07-30<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/13924/" rel="tag">卸载</a>,<a href="https://kunjuke.com/tag/3947/" rel="tag">组件</a>,<a href="https://kunjuke.com/tag/111912/" rel="tag">自行</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/868542.html"><h6>「Vue系列」之Vue2实现当前组件重新加载</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/868542.html"><img src="https://www.kunjuke.com/file/css/thumb/9.jpg/280-180.jpg" alt="「Vue系列」之Vue2实现当前组件重新加载"></a></div> <div class="news-info"> <p>遇到问题的场景：需要把当前组件完全还原成初始化状态，不要页面全部刷新例如：重置按钮，只刷新当前加载组件其他办法：使用vue-router重新定向到当前页面，页面不刷新使用window-reload（） 页面全部刷新，用户...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-07-29<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/563/" rel="tag">加载</a>,<a href="https://kunjuke.com/tag/73862/" rel="tag">系列</a>,<a href="https://kunjuke.com/tag/3947/" rel="tag">组件</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/868227.html"><h6>生成跨语言的类型声明和接口绑定的工具（Djinni ）</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/868227.html"><img src="https://www.kunjuke.com/file/css/thumb/9.jpg/280-180.jpg" alt="生成跨语言的类型声明和接口绑定的工具（Djinni ）"></a></div> <div class="news-info"> <p>Djinni 是一个用来生成跨语言的类型声明和接口绑定的工具，主要用于 C++ 和 Java 以及 Objective-C 间的互通。 示例接口定义文件： # Multi-line comments can be added here. This comment will be propagated ...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-07-29<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/1453/" rel="tag">接口</a>,<a href="https://kunjuke.com/tag/3335/" rel="tag">生成</a>,<a href="https://kunjuke.com/tag/5429/" rel="tag">绑定</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/868163.html"><h6>react中受控组件与非受控组件--</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/868163.html"><img src="https://www.kunjuke.com/file/css/thumb/1.jpg/280-180.jpg" alt="react中受控组件与非受控组件--"></a></div> <div class="news-info"> <p>非受控组件：随用随取 1 render() { 2 return ( 3 <div> 4 <h1>非受控组件</h1> 5 <form action="" onSubmit={this.handleSub}&...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-07-29<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/109217/" rel="tag">与非</a>,<a href="https://kunjuke.com/tag/109216/" rel="tag">受控</a>,<a href="https://kunjuke.com/tag/3947/" rel="tag">组件</a></span> </div> </div> </li> <li> <div class="news-tit news-right"> <a href="https://kunjuke.com/article/867822.html"><h6>【.NET源码解读】Configuration组件及自动更新</h6></a> <div class="pa news-img"><a href="https://kunjuke.com/article/867822.html"><img src="https://www.kunjuke.com/file/css/thumb/3.jpg/280-180.jpg" alt="【.NET源码解读】Configuration组件及自动更新"></a></div> <div class="news-info"> <p>Configuration组件是.NET中一个核心的、非常重要的组件。它提供了一种方便的机制，用于从配置文件、环境变量、命令行参数等各种数据源中读取和配置应用程序，以满足不同环境下应用程序的需求。 在本篇文章中，将...</p> <span><i class="fa fa-clock-o fa-fw"></i>2023-07-29<i class="fa fa-bars" aria-hidden="true"></i><a href="https://kunjuke.com/jiaocheng/daima/" rel="category tag">编程代码</a><i class="fa fa-tag fa-fw"></i><a href="https://kunjuke.com/tag/832/" rel="tag">源码</a>,<a href="https://kunjuke.com/tag/3947/" rel="tag">组件</a>,<a href="https://kunjuke.com/tag/8348/" rel="tag">自动更新</a></span> </div> </div> </li> </ul> </div> <div class="sidebar" id="sidebar"> <div class="right-content" id="sidead"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-6278534685681362" data-ad-slot="4967365039"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="right-content" id="sidead"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-6278534685681362" data-ad-slot="4967365039"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <a class="scroll-top" style="display: none;"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a> <div class="footer-news"> <div class="links"></div> <p><i class="fa fa-copyright fa-fw"></i>Copyright 2023. <a href="https://www.kunjuke.com/">昆居客</a><b class="cang"> - IT编程,互联网信息技术文档大全!<b></p> </div><script src="/file/css/all.js"></script> <script src="/file/css/tongji.js"></script> <script src='/file/css/gaoliang/main.js'></script> <script src='/file/css/gaoliang/prettyprint.js'></script> <script src="/file/css/FileSaver.js"></script> <script src="/file/css/jquery.wordexport.js"></script> <script> $(function(){ $("input[type='button']").click(function(event) { $(".content").wordExport('React 使用Hooks简化受控组件的状态绑定'); }); }) </script> </body> </html>