如何在React Hooks中应用输入验证

import React, { useState } from 'react';

const useInputValidation = (initialValue, validate) => {
  const [value, setValue] = useState(initialValue);
  const [error, setError] = useState('');

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

  const handleBlur = () => {
    const validationError = validate(value);
    setError(validationError);
  };

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

const App = () => {
  const validateEmail = (email) => {
    if (!email) {
      return '请输入电子邮件地址';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      return '请输入有效的电子邮件地址';
    }
    return '';
  };

  const validatePassword = (password) => {
    if (!password) {
      return '请输入密码';
    } else if (password.length < 6) {
      return '密码长度不能少于6个字符';
    }
    return '';
  };

  const emailInput = useInputValidation('', validateEmail);
  const passwordInput = useInputValidation('', validatePassword);

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

    if (!emailInput.error && !passwordInput.error) {
      // 执行表单提交逻辑
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">电子邮件：</label>
        <input
          type="email"
          id="email"
          value={emailInput.value}
          onChange={emailInput.handleChange}
          onBlur={emailInput.handleBlur}
        />
        {emailInput.error && <div>{emailInput.error}</div>}
      </div>
      <div>
        <label htmlFor="password">密码：</label>
        <input
          type="password"
          id="password"
          value={passwordInput.value}
          onChange={passwordInput.handleChange}
          onBlur={passwordInput.handleBlur}
        />
        {passwordInput.error && <div>{passwordInput.error}</div>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

export default App;