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

當我們把像 <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簡化受控組件的狀態綁定”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！