在React Typescript中，类型'EventTarget'上不存在属性'elements'。

Question

在我的App组件（简单版）中，我创建了一个带有3个输入字段和1个提交按钮的表单。当用户填写表单并点击提交按钮后，表单数据会显示在页面上。

现在，我的问题是，在从event.target.elements访问表单元素节点时，我遇到了typescript错误。

TypeError: Property 'elements' does not exist on type 'EventTarget'.

我尝试通过将event.target强制转换为HTMLInputElement来解决这个问题，但错误仍然存在。

function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const { firstName, lastName, company } = (event.target as HTMLInputElement).elements;
    setFormData({
      firstName: firstName.value,
      lastName: lastName.value,
      company: company.value
    });
  }

当我使用上述代码时，出现了错误信息。

TypeError: Property 'elements' does not exist on type 'HTMLInputElement'.

沙盒链接

- Subrato Pattanaik

Answer 1

为了在表单中输入event.target，您需要手动完成，详见Forms and Events TS 检查表。

interface FormData {
  firstName: { value: string };
  lastName: { value: string };
  company: { value: number[] };
}

function handleSubmit(e: FormEvent<HTMLFormElement>) {
  e.preventDefault();

  const { firstName, lastName, company } = e.target as typeof e.target & FormData;
  setFormData({
    firstName: { value: firstName.value },
    lastName: { value: lastName.value },
    company: { value: company.value }
  });
}

- Dennis Vash

---

我能否在没有 TypeScript 错误的情况下通过 event.target.elements 获取元素？ - Subrato Pattanaik

你可以尝试使用 event.currentTaget.elements，但它不会被类型化，你需要像示例中那样手动完成。 - Dennis Vash