如何在 React 中实现一个可复用的自定义 Hook 来管理表单状态和验证？

如何在 React 中实现一个可复用的自定义 Hook 来管理表单状态和验证？

回答：
可以创建一个名为 useFormField 的自定义 Hook，封装表单项的值、错误信息、是否触碰过（touched）等状态，并提供验证逻辑。例如：

import { useState } from 'react';

const useFormField = (initialValue, validator = () => null) => {
  const [value, setValue] = useState(initialValue);
  const [touched, setTouched] = useState(false);

  const error = validator(value);

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

  const handleBlur = () => {
    setTouched(true);
  };

  return {
    value,
    onChange: handleChange,
    onBlur: handleBlur,
    error: touched ? error : null,
    isInvalid: touched && !!error,
  };
};

使用示例：

const emailValidator = (value) => {
  if (!value) return 'Email is required';
  if (!/\S+@\S+\.\S+/.test(value)) return 'Email is invalid';
  return null;
};

const MyForm = () => {
  const emailField = useFormField('', emailValidator);

  return (
    <form>
      <input
        type="email"
        placeholder="Email"
        {...emailField}
      />
      {emailField.error && <span>{emailField.error}</span>}
    </form>
  );
};

解析：
该自定义 Hook 抽象了表单项的状态管理（value）、用户交互状态（touched）以及验证逻辑（validator），实现了逻辑复用。通过将验证函数作为参数传入，提高了灵活性；同时将 error 与 touched 结合，实现“仅在用户离开字段后才显示错误”的良好 UX。返回的对象可直接 spread 到 input 元素上，简化使用。这种方式符合 React 的组合思想，比使用大型表单库更轻量，适合中小型项目。