TypeScript中React的事件类型

Question

我在使用React中的onSubmit事件，并将其从Javascript更改为TypeScript。

const submitUserHandler = (e) => {

e.preventDefault();
dispatch(
  authenticate({
    name: e.target.personname.value,
    pw: e.target.password.value,
  })
);
};

我尝试将“e：React.ChangeEvent”赋值给事件，但会出现以下错误提示：

“属性'personname'在类型'EventTarget＆HTMLInputElement'上不存在。”

我该如何指定包括personname和password的类型？ 谢谢！

- David Solsona

---

我相信e.target将等于你的HTMLInput元素。 需要查看你的HTML，为什么该元素有“personname”属性。 - vdj4y

TypeScript目前还不支持事件内部的类型推断。您可以使用以下代码来解决这个问题：(e.target as any).personname.value - cuongdevjs

Answer 1

你可以像这样做

<form
  ref={formRef}
  onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
    const target = e.target as typeof e.target & {
      personname: { value: string };
      password: { value: string };
    };
    const email = target.personname.value; // typechecks!
    const password = target.password.value; // typechecks!
    // etc...
  }}
>
  <div>
    <label>
      Email:
      <input type="personname" name="personname" />
    </label>
  </div>
  <div>
    <label>
      Password:
      <input type="password" name="password" />
    </label>
  </div>
  <div>
    <input type="submit" value="Log in" />
  </div>
</form>

更多详情请参考

- DevLoverUmar