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

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

回答：
可以创建一个名为 useFormField 的自定义 Hook，封装 useState 和 onChange 逻辑，使多个表单字段共享相同的状态管理逻辑。例如：

import { useState } from 'react';

function useFormField(initialValue = '') {
  const [value, setValue] = useState(initialValue);

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

  const reset = () => setValue(initialValue);

  return { value, onChange: handleChange, reset };
}

// 使用示例
function MyForm() {
  const nameField = useFormField('');
  const emailField = useFormField('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ name: nameField.value, email: emailField.value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input {...nameField} placeholder="Name" />
      <input {...emailField} placeholder="Email" />
      <button type="submit">Submit</button>
      <button type="button" onClick={nameField.reset}>Reset Name</button>
    </form>
  );
}

解析：
该自定义 Hook useFormField 将表单字段的值、变更处理器和重置方法封装起来，遵循了 React 的“组合优于继承”原则。通过返回一个包含 value、onChange 和 reset 的对象，可以轻松地 spread 到 input 元素上，提升代码复用性和可维护性。这种方式特别适用于中大型项目中具有多个相似表单字段的场景，减少了样板代码并统一了状态管理逻辑。