在反应 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<HTMLInputElement>
可以吗?
this *** answer 对您有帮助吗?即,尝试使用 React 中的 KeyboardEvent
组件:React.KeyboardEvent<HTMLInputElement>
@BaoHuynhLam 是正确的。正确的方法是onKeyUp=(e: React.KeyboardEvent<HTMLInputElement>) =>
【参考方案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<HTMLInputElement>
。另外,请参阅related answer 了解 onkeypress。
此外,您可能希望在单独的行中将类型设置为 shown here。
奖励:relevant answer here 这个主题。
【讨论】:
以上是关于在反应 TypeScript 中键入输入的键值 [重复]的主要内容,如果未能解决你的问题,请参考以下文章
我可以在 TypeScript 中创建一个对每个键值对都是类型安全的键值字典吗?
强烈键入 react-redux 与 typescript 连接