如何在选择选项卡上捕获事件答案

【问题标题】：how to capture event on select tab如何在选择选项卡上捕获事件
【发布时间】：2020-05-29 20:50:03
【问题描述】：

我在我的应用程序中使用了 react-select 来实现下拉功能。我想捕捉用户是否按下了“Enter”按钮/键。我做过这样的事情：

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} />);
}

所以在 _onInputChange 方法上，我尝试了 this._onInputChange.bind(this, event)。它没有用。那么如何捕获事件

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

使用react-select 上的onKeyDown 属性来捕获按键事件

<Select options={options} onKeyDown={onKeyDown} />

并检查使用event.keyCode 按下了哪个键（13 代表 ENTER）

const onKeyDown = event => {
  if (event.keyCode === 13) {
    // enter has been pressed
  }
};

工作示例：https://stackblitz.com/edit/react-stackoverflow-60219803

【讨论】：

e.keyCode 已弃用。您应该改用e.key === 'Enter'（或e.code === 'Enter'）。您可以查看e.key 和e.code 的值，以及keyjs.dev 上较旧和已弃用的属性。

【解决方案2】：

上面的答案可以正常工作。如果您想更改密钥，我已附上密钥代码的链接。

https://keycode.info/

输入是 13。

还可以根据下面的帖子绑定所需的事件。

onKeyPress Vs. onKeyUp and onKeyDown

【讨论】：

e.keyCode 已弃用。您应该改用e.key 或e.code。此外，还有一个替代工具可以为您提供有关不同值和属性的更多详细信息：keyjs.dev?