React with TypeScript中的onKeyDown事件

Question

在我的React组件中，我有以下输入元素：

<input
max={120}
type="number"
value={numValue}
onKeyDown={handleKeyDown}
/>

这是我的handleKeyDown函数：

const handleKeyDown = (evt: KeyboardEvent) => {
console.log(evt.key);
console.log(evt.target.value);
}

这是我从TypeScript 中得到的错误

Property 'value' does not exist on type 'EventTarget'.

我需要分配什么事件类型，以便同时覆盖evt.target.value和evt.key？

Answer 1

有两个问题：

编写代码的方式会阻止TypeScript编译器推断事件当前目标的类型。你可以这样内联函数：

<input max={120} type="number" value={numValue} onKeyDown={(evt) => {...}} />

或者像这样帮助编译器：

const handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {...}

但问题不会消失，因为即使在这个例子中我们确信evt.target是HTMLInputElement的一个例子，我们也不可能是在一般情况下。例如，如果您的事件处理程序连接到内部有<input>的<div>，则由于事件冒泡，div可能会接收到evt.target不是HTMLDivElement而是HTMLInputElement的事件！

evt.currentTarget将实现您想要的。或者，在这种特殊情况下，类型断言((evt.target as HTMLInputElement).value(也是安全的。

Answer 2

您只需要对函数进行一点更改

const handleKeyDown = (evt) => {
console.log(evt.key);
console.log(evt.target.value);
// set num value here
}