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

Question

在我的应用程序组件（简单的一个）中，我创建了一个带有 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'.

沙盒链接

Answer 1

为了在event.target表单中输入，您需要手动执行，请参阅表单和事件 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 }
  });
}