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

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

回答与解析：

可以创建一个名为 useInput 的自定义 Hook，封装 useState 并返回当前值、onChange 事件处理函数以及重置方法。这样能减少重复代码，提升表单控件的复用性。

示例代码如下：

import { useState } from 'react';

// 自定义 Hook
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

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

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

  return {
    value,
    onChange: handleChange,
    reset,
    // 也可以直接返回绑定好的 props 对象
    bind: {
      value,
      onChange: handleChange
    }
  };
}

// 使用示例
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.bind} placeholder="Name" />
      <input {...emailInput.bind} placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}

解析要点：

• 自定义 Hook 必须以 use 开头，这是 React 的命名约定。
• 通过返回一个包含 value、onChange 和辅助方法（如 reset）的对象，使组件可以灵活使用。
• 使用展开运算符 {...input.bind} 可以简洁地将属性绑定到 input 元素。
• 初始值通过参数传入，增强通用性。
• 该模式适用于受控组件，确保状态与 UI 同步，并易于测试和维护。