时间戳

首页 > 解决方案 > 与 TypeScript 反应的 onKeyDown 事件

reactjs - 与 TypeScript 反应的 onKeyDown 事件

问题描述

在我的 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'.

我需要分配什么事件类型才能同时涵盖 theevt.target.value和evt.key?

标签： reactjstypescript

解决方案

有两个问题：

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

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

或像这样帮助编译器：

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

但是问题不会消失，因为即使在这种情况下我们确定它evt.target是 的一个实例HTMLInputElement，我们也不能在一般情况下。例如，如果您的事件处理程序附加到<div>带有<input>内部的 a，则由于事件冒泡，因此div可以接收evt.target不是 anHTMLDivElement而是 an的事件！HTMLInputElement

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

推荐阅读