HTMLInputElement 类型上不存在属性“name”？

Question

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

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

为什么HTMLInputElementreact中没有name属性？

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。