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


Posted in Javascript onMarch 18, 2019

开始之前

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

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 组件。只用了几行代码就完成了定义初始值和受控组件的绑定,是不是很方便?

当我们输入邮箱的时候,并不会出现校验提示,但是一旦从邮箱输入框失去焦点以后,输入的值就会被校验,并根据校验结果显示相应的提示。而密码输入框,则会在输入的过程中和失焦后都进行校验。

总结

上面这个例子已经可以处理基本的表单验证,至于格式化用户输入的数据以及自定义收集表单域的值的时机等其他需求,我就不再演示了,大家可以自行设计。这也是 Hooks 的特殊之处,它让我们可以更容易的复用逻辑代码,可以根据需要自行编写 custom Hooks。

文章中关于 useInput 的 API 设计只是众多方案中的一种,只是为大家提供一些参考。你也可以把整个表单的状态封装到一个 useForm 方法中,统一管理所有表单域的状态。

希望本文能为大家带来一些关于如何使用 Hooks 的灵感,即使从来没有使用过 Hooks,也强烈建议大家尝试一下。我已经在项目中大量使用 Hooks 了,并且它也为我带来了很好的效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
JavaScript显式数据类型转换详解
Mar 18 #Javascript
浅谈js中的bind
Mar 18 #Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 #Javascript
JavaScript中this用法学习笔记
Mar 17 #Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 #Javascript
微信小程序登录session的使用
Mar 17 #Javascript
Javascript读写cookie的实例源码
Mar 16 #Javascript
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
js对象数组按属性快速排序
2011/01/31 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
用JS实现选项卡
2020/03/23 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
数控技术专业推荐信
2013/11/01 职场文书
银行职员自我鉴定
2014/04/20 职场文书
创业融资计划书
2014/04/25 职场文书
体育活动总结范文
2014/05/04 职场文书
推广活动策划方案
2014/08/23 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
中小企业员工手册范本
2015/05/14 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python