自定义 useForm 打字稿无法正常工作

Question

下面是我的useForm钩子：

const useForm = () => {
  const [state, setState] = useState({});

  const inputHandler: (e: React.ChangeEvent<HTMLInputElement>) => void = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    e.persist();
    setState((preState) => ({
      ...preState,
      [e.target.name]: e.target.value,
    }));
  };

  return [state, inputHandler];
};
export default useForm;

然后在 tsx 文件中我有代码：

const [state, inputHandler] = useForm();
...
    <input
          name="title"
          type="text"
          value={"title" in state ? state.title : ""}
          onChange={inputHandler} // error!!!
          placeholder="Title"
          className="mb-2 focus:ring-red-500 focus:border-red-500 block w-full pr-12 sm:text-sm border-red-300 rounded-md"
        />

但是onChange 总是抱怨类型{} 不能分配给类型ChangeEventHandler<HTMLInputElement>。我已将 {} 更改为 Any 但似乎 inputHandler 总是返回初始化状态而不是我在自定义挂钩中定义的事件处理函数。

Answer 1

经过几个小时的调查，我发现错误是由返回 [] 引起的。我用 return {...} 替换它。钩子就像一个魅力