React 使用Hooks簡化受控組件的狀態綁定

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;

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,
 };
}

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>
 );
}