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

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

回答与解析：

可以使用 useState 和自定义 Hook 封装表单逻辑。例如，创建一个 useForm Hook：

import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues(prev => ({ ...prev, [name]: value }));
  };

  const reset = () => {
    setValues(initialValues);
  };

  return [values, handleChange, reset];
}

使用方式：

function MyForm() {
  const [formData, handleInputChange, resetForm] = useForm({ username: '', email: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
    resetForm(); // 可选：提交后重置表单
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" value={formData.username} onChange={handleInputChange} />
      <input name="email" value={formData.email} onChange={handleInputChange} />
      <button type="submit">提交</button>
    </form>
  );
}

解析：

• useForm 接收初始值，返回当前表单值、处理函数和重置函数。
• 利用对象展开和计算属性名 [name] 实现动态更新对应字段。
• 此 Hook 提高了代码复用性，适用于任意结构的简单表单。
• 注意：此实现适用于受控组件，且仅处理原生 input。对于更复杂的表单（如校验、异步提交），可考虑使用 Formik 或 React Hook Form 等库。