输入按后如何提交搜索字段

Question

我写我的应用程序我 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 时，它就可以工作了。 解决方案是在任何输入字段上设置自动对焦，但我不想这样做。 您知道任何其他解决方案，也许是事件侦听器或某些让我按 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);
  }
  //...
}