我写我的应用程序我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并显示结果的某种解决方案,而无需任何用户的筛选器,并且无需保持任何字段活动。
预先感谢您的帮助。
默认情况下,将输入元素包装在中时,当您<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);
}
//...
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句