[英]how to capture event on select tab
I have used react-select for drop-drown feature in my application.我在我的应用程序中使用了 react-select 作为 drop-drown 功能。 I want to capture whether user has pressed the "Enter" button/key.
我想捕获用户是否按下了“Enter”按钮/键。 I have done something like this:
我做了这样的事情:
render(){
const props = {
className: 'search-combobox',
placeholder: "search something",
onChange: this._onSelectionChange.bind(this),
onSelect: this.props.onSelectedItem,
options: this.state.options(),
filterOptions: this._filterOptions.bind(this),
onInputChange: this._onInputChange.bind(this),
valueKey: 'id',
};
return(
<Select {...props}
autoFocus={true}
clearable={true}
closeOnSelect={true}
escapeClearsValue={true}
onBlurResetsInput={false} />);
}
So on _onInputChange method, I tried this._onInputChange.bind(this, event).所以在 _onInputChange 方法上,我尝试了 this._onInputChange.bind(this, event)。 It didn't work.
它没有用。 How to capture event then
那么如何捕获事件
Use onKeyDown
prop on react-select
to capture a key press event在
react-select
上使用onKeyDown
道具来捕获按键事件
<Select options={options} onKeyDown={onKeyDown} />
And check which key is pressed using event.keyCode
(13 is for ENTER)并使用
event.keyCode
检查按下了哪个键(13 用于 ENTER)
const onKeyDown = event => {
if (event.keyCode === 13) {
// enter has been pressed
}
};
Working example: https://stackblitz.com/edit/react-stackoverflow-60219803
工作示例: https : //stackblitz.com/edit/react-stackoverflow-60219803
Above answer will work fine.以上答案将正常工作。 I have attached link for keycodes incase if you want to change key.
如果您想更改密钥,我已经附加了密钥代码的链接。
https://keycode.info/ https://keycode.info/
For enter it is 13.对于输入,它是 13。
Also bind required event according to below post.还根据下面的帖子绑定所需的事件。
onKeyPress Vs. onKeyPress 对比onKeyUp and onKeyDown
onKeyUp 和 onKeyDown
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.