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

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

回答：
可以创建一个名为 useInput 的自定义 Hook，它接收初始值作为参数，并返回当前值、变更处理函数以及重置函数。示例如下：

import { useState } from 'react';

function useInput(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 nameInput = useInput('');
  const emailInput = useInput('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交数据:', { name: nameInput.value, email: emailInput.value });
    nameInput.reset();
    emailInput.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input {...nameInput} placeholder="姓名" />
      <input {...emailInput} placeholder="邮箱" />
      <button type="submit">提交</button>
    </form>
  );
}

解析：
该自定义 Hook 利用了 React 的 useState 封装了表单控件的状态逻辑。通过解构返回的对象，可以直接将 value 和 onChange 传入 input 元素（使用 JSX 扩展操作符 ...），实现双向绑定效果。reset 方法允许在需要时（如提交后）重置输入框。这种方式提升了代码复用性，避免在多个组件中重复编写状态管理逻辑，符合 React Hooks 的最佳实践。同时，每个调用 useInput 的实例都有独立的状态，互不影响。