React TypeScript中input输入框onChange事件类型定义错误如何解决？

问题代码存在3处可直接修复的错误： #

• 1. handleChange4 中调用了未定义的 setState3 方法，实际你声明的对应修改方法是 setState4，属于变量名笔误。
• 2. onChange 事件绑定逻辑错误：当前写法 onChange={() => handleChange4} 仅返回了事件处理函数本身，既没有执行函数，也没有传递事件参数，正确写法是直接传入函数引用 onChange={handleChange4}，或者包裹箭头函数时主动传参 onChange={(e) => handleChange4(e)}。
• 3. handleChange4 用 React.FormEvent 类型并非错误，但 input 元素的 onChange 事件更推荐使用和 handleChange5 一致的 ChangeEvent<HTMLInputElement> 类型，类型匹配度更高不需要额外断言。

修复后可正常运行的完整代码： #

import React, { ChangeEvent, useState } from "react";

export default function Unidirectionflow() {
  const [state4, setState4] = useState("");
  const [state5, setState5] = useState("");

  const handleChange4 = (e: ChangeEvent<HTMLInputElement>): void => {
    setState4(e.target.value);
  };

  const handleChange5 = (event: ChangeEvent<HTMLInputElement>) => {
    setState5(event.currentTarget.value);
  };

  return (
    <main>
      <input type="text" value={state4} onChange={handleChange4} />
      <input type="text" value={state5} onChange={handleChange5} />
    </main>
  );
}

内容的提问来源于stack exchange，提问作者Sujio