enter press 后如何提交搜索字段

Question

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

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.

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

提前感谢您的帮助。

Answer 1

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

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

该事件监听器只需要在菜单挂载时创建。关闭菜单时应删除侦听器。

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

enter press 后如何提交搜索字段

How to submit search fields after enter press

html

javascript

enter

onkeypress

reactjs