自定义 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 总是 return 初始化状态而不是我在自定义挂钩中定义的事件处理函数。

Answer 1

经过几个小时的调查，我发现错误是由 return[] 引起的。我将其替换为 return {...}。钩子很有魅力

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

Custom useForm typescript not working properly

typescript

reactjs

tsx

react-hooks