開始之前
閱讀本文需要對以下幾項有一定了解
ECMAScript 6
文章中大量用到了 ES6 語法，比如解構賦值和函數參數默認值、剩余參數、展開語法、箭頭函數等。
React 在 16.8 版本中推出了 Hooks，它允許你在“函數組件”中使用“類組件”的一些特性。
React 本身提供了一些 Hooks，比如 useState、useReducer 等。通過在一個以“use”作為命名起始的函數中調用這些 Hooks，就得到了一個 custom Hook(自定義 Hook)。
Custom Hooks 允許我們把任何邏輯封裝到其中，以便于復用足夠小的組件邏輯。
當我們把像 <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：
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 對象擁有以下幾個屬性：
在函數體中，我們調用兩次 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 了，并且它也為我帶來了很好的效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
