在反应 TypeScript 中键入输入的键值 [重复]

Posted

技术标签:

【中文标题】在反应 TypeScript 中键入输入的键值 [重复]【英文标题】:Typing an input's keyup in react TypeScript [duplicate] 【发布时间】:2021-09-16 06:01:39 【问题描述】:

我正在尝试将我的 keyup 事件与 TS 一起使用,但使用 any|KeyboardEvent 不起作用。

如何在 React 中键入事件?

TS 错误

Type '(e: KeyboardEvent) => void' is not assignable to type 'KeyboardEventHandler<htmlInputElement>'.
  Types of parameters 'e' and 'event' are incompatible.
    Type 'KeyboardEvent<HTMLInputElement>' is missing the following properties from type 'KeyboardEvent': char, isComposing, DOM_KEY_LOCATION_LEFT, DOM_KEY_LOCATION_NUMPAD, and 15 more.  TS2322

组件

<input
  type="text"
  placeholder="Search for claim ID"
  onKeyUp=(e: KeyboardEvent) => 
    console.info();
  
/>

【问题讨论】:

我对 React 不是特别精通,但看起来您正在将 onKeyUp(一个键盘事件)设置为一个空对象。相反,onKeyUp="console.info($event)" 肯定会起作用吗? @cmprogram 什么空对象?这是 JSX 插值 中的 箭头函数 如果你改成e: KeyboardEvent&lt;HTMLInputElement&gt; 可以吗? this *** answer 对您有帮助吗?即,尝试使用 React 中的 KeyboardEvent 组件:React.KeyboardEvent&lt;HTMLInputElement&gt; @BaoHuynhLam 是正确的。正确的方法是onKeyUp=(e: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; 【参考方案1】:

首先,正如Bao Huynh Lam在cmets中所说,你需要使用这个

onKeyUp=(e: React.KeyboardEvent<HTMLInputElement>) => 

作为事件类型。 然后,为了获取输入的值,可以将e.target 转换为HTMLInputElement,然后获取它的值。

查看这个小sandbox

<input
  type="text"
  placeholder="Search for claim ID"
  onKeyUp=(e: React.KeyboardEvent<HTMLInputElement>) => 
    console.info((e.target as HTMLInputElement).value);
  
/>

【讨论】:

【参考方案2】:

根据处理键盘事件的this guide,看来你的类型检查e: keyboardEvent应该是e: React.KeyBoardEvent&lt;HTMLInputElement&gt;。另外,请参阅related answer 了解 onkeypress。 此外,您可能希望在单独的行中将类型设置为 shown here。 奖励:relevant answer here 这个主题。

【讨论】:

以上是关于在反应 TypeScript 中键入输入的键值 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

我可以在 TypeScript 中创建一个对每个键值对都是类型安全的键值字典吗?

强烈键入 react-redux 与 typescript 连接

是否可以在 TypeScript 中精确键入 _.invert?

vanilla javascript:拦截输入键并更改键值

TypeScript:如何为函数中的任何键键入对象剩余分布

在 Google Cloud Storage 中存储像数据一样的键值