javascript - 如何在按下回车键后提交搜索字段

Question

我在 React.tsx 中编写了我的应用程序。我打开菜单窗口，其中包含许多 div 元素，其中包含许多输入字段、复选框和选择元素。我还有提交按钮，当我单击它时，会出现带有用户过滤器的结果列表:检查/输入/选择。我想在按下回车键后也显示结果。我添加这个方法:

private enterPressed(event: any) {
  const code = event?.keyCode || event?.which;
  if (code === 13) {
    this.onClickSearch();
  }
}

我也用onKeyPress={this.enterPressed.bind(this)} 到我的输入和所选元素。

我遇到以下问题。当我打开窗口并按 Enter 键时，什么也没发生。当我专注于任何输入然后按 Enter 时它就会起作用。解决方案是在任何输入字段上设置自动聚焦，但我不想以这种方式执行此操作。您是否知道任何其他解决方案，也许使用事件监听器或让我按 Enter 并显示结果的东西，也无需任何用户的过滤器并且无需保持任何字段的事件状态。？

提前感谢您的帮助。

Answer 1

默认情况下，当您将输入元素包装在 <form> 中时，您可以在关注某个字段时按 Enter 键来提交，这是表单工作的预期方式。

但是既然您已经提到您不希望出现这种行为，您可以将事件监听器附加到窗口对象，该对象将监听全局按键。

此事件监听器仅需要在安装菜单时创建。关闭菜单时应删除监听器。

class Menu extends Component {
  handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      // enter pressed
    }
  }
  componentDidMount(){
    window.addEventListener("keydown", this.handleKeyDown);
  }
  componentWillUnmount(){
    window.removeEventListener("keydown", this.handleKeyDown);
  }
  //...
}