javascript - 输入后如何提交搜索字段
问题描述
我在 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 时,它就可以工作了。解决方案是在任何输入字段上设置自动对焦,但我不想那样做。您是否知道任何其他解决方案,可能使用事件侦听器或让我按下回车并显示结果的东西,也没有任何用户的过滤器并且没有保持任何字段处于活动状态。?
提前感谢您的帮助。
解决方案
默认情况下,当您将输入元素包装在 a 中<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);
}
//...
}
推荐阅读
- python - 返回的变量未在 python 中定义
- angular - 输入字段更新时,Angular ngOnChanges 不会触发
- exit - Anylogic 阻止 Exit & Enter 将代理移动到第一个空闲队列
- android - 如何用 RecyclerVeiw 填充屏幕的其余部分?
- xamarin.forms - 使用 zxing 进行条码扫描
- ethereum - 当我对 Ethereum 和 RSK 使用相同的种子短语时,为什么我的地址大写不同?
- reactjs - 2020年后如何在react js中使用swf
- excel - Rundeck 如何在我的机器上启动 Excel 文件?
- typescript - 如何在数据加载完成之前处理 Vue 组件内容
- python - 多线程网络爬虫——典型的并发限制是什么?