输入后如何提交搜索字段答案

【问题标题】：How to submit search fields after enter press输入后如何提交搜索字段
【发布时间】：2020-06-08 01:54:33
【问题描述】：

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

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

我也使用 onKeyPress={this.enterPressed.bind(this)} to my inputs and selected elements.

我有以下问题。当我打开窗口并按 Enter 时，什么也没发生。当我专注于任何输入然后按 Enter 时，它就可以工作了。解决方案是在任何输入字段上设置自动对焦，但我不想那样做。您是否知道任何其他解决方案，可能使用事件侦听器或让我按下回车键并显示结果也没有任何用户过滤器并且没有保持任何字段处于活动状态的东西。？

提前感谢您的帮助。

【问题讨论】：

您可以做的一件事是在页面加载时在页面上显示所有结果 (componentDidMount)
默认情况下所有结果都应该被隐藏。用户可以在点击搜索按钮或回车后显示未过滤的列表。

标签： javascript html reactjs enter onkeypress

【解决方案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);
  }
  //...
}

【讨论】：

是的，这正是我需要的！谢谢。