Question

const handleOnChange = (e: React.SyntheticEvent<HTMLInputElement>): void => {
    console.log(e.name);
  }

<input name="aa" onChange={handleOnChange} />

为什么HTMLInputElement在反应中没有名称属性？

Answer 1

更改事件对象的正确类型是：ChangeEvent<HTMLInputElement>。

尽管e.name不存在，但获取元素的name属性的正确方法是e.target.name，其中事件中的target对象是输入元素本身，则需要其中的name属性。

所以您的handleOnChange方法如下：

const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {
    console.log(e.target.name);
}

或者：

const handleOnChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    console.log(e.target.name);
}

在这种情况下，您为handleOnChange定义了类型，并为它分配了箭头函数，因此TypeScript将相应地为e推断类型。

Answer 2

您始终可以通过 e.target.YourAttribute

target target（任何事件）

dotnet test

属性“名称”在HTMLInputElement类型上不存在吗？

2 个答案: