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提交。

但是，由于您已经提到不希望这种行为，因此可以将事件侦听器附加到将侦听全局按键的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);
  }
  //...
}

输入后如何提交搜索字段

1 个答案: