如何在React中使用Custom Hooks處理表單輸入驗證

在React中使用自定義Hooks處理表單輸入驗證可以使代碼更加模塊化和可重用。以下是一個示例，展示如何使用自定義Hooks處理表單輸入驗證：

import React, { useState } from 'react';

// 自定義Hooks，用于處理表單輸入驗證
const useFormInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const [error, setError] = useState('');

  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);

    if (validator(newValue)) {
      setError('');
    } else {
      setError('Invalid input');
    }
  };

  return {
    value,
    error,
    handleChange,
  };
};

const Form = () => {
  // 使用自定義Hooks
  const username = useFormInput('', (value) => value.length > 3);
  const password = useFormInput('', (value) => value.length > 5);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!username.error && !password.error) {
      // 處理表單提交邏輯
      console.log('Form submitted:', username.value, password.value);
    } else {
      console.log('Form has errors');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" value={username.value} onChange={username.handleChange} />
        {username.error && <span style={{ color: 'red' }}>{username.error}</span>}
      </label>
      <br />
      <label>
        Password:
        <input type="password" value={password.value} onChange={password.handleChange} />
        {password.error && <span style={{ color: 'red' }}>{password.error}</span>}
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

在上面的示例中，我們創建了一個名為useFormInput的自定義Hooks，它接受一個初始值和一個驗證函數作為參數，并返回一個包含值、錯誤和處理變化的函數的對象。我們在表單中使用這個自定義Hooks來處理用戶名和密碼的輸入驗證。在handleSubmit函數中，我們檢查是否有錯誤，如果沒有則執行表單提交邏輯。

通過使用自定義Hooks，我們可以將表單輸入驗證邏輯封裝起來，使代碼更清晰和易于維護。