React 中的 onKeyDown 事件与 TypeScript

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，我们也不能在一般情况下这样做。例如，如果您的事件处理程序附加到内部的 a <div>，<input>则由于事件冒泡，它div可能会接收evt.target不是 anHTMLDivElement而是 an的事件！HTMLInputElement

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