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

Question

我在我的应用程序中使用了 react-select 作为 drop-drown 功能。 我想捕获用户是否按下了“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)。 它没有用。 那么如何捕获事件

Answer 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

Answer 2

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

https://keycode.info/

对于输入，它是 13。

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

onKeyPress 对比 onKeyUp 和 onKeyDown