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

Question

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

现在，我的问题是从 event.target.elements.

访问表单元素节点时出现打字稿错误

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'.

Sandbox link

Answer 1

为了在表单中输入 event.target，您需要手动输入，请参阅 forms and events TS cheatsheet。

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 }
  });
}

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

Property 'elements' does not exist on type 'EventTarget' in React Typescript

events

typescript

reactjs