reactjs - 如何将相同的处理程序附加到多个事件但同时触发两个事件时仅调用一次

Question

我正在为 material-ui/AutoComplete 编写一个包装器。我希望它：

1. 设置值并在点击建议时提交，
2. 设置值并在按回车键提交建议，
3. 按箭头键浏览列表
4. 单击“自动完成”按钮旁边的提交按钮提交。

我意识到我需要捕获三个事件：

• onKeyDownCapture
• onKeyDown
• onNewRequest

所有事件都使用相同的处理程序进行处理。

在这些事件中，onNewRequest 像往常一样被触发，但是当我按下回车按钮而 onKeyDownCapture 捕获点击时触发 onKeyDown。当值更新时，组件也会自动触发 onNewRequest，从而导致对我的搜索服务的重复和昂贵的调用。

有没有办法阻止重复调用搜索服务？

这是我的组件的代码：

handler(){
// calls search service.
}

render(){
return (
      <AutoComplete
        ...{props}
        onKeyDownCapture={this.handler}
        onKeyDown={this.handler}
        onNewRequest={this.handler}
      />
}

我尝试了一个丑陋的“newRequestDuplicatesHandler”，它基本上跟踪最后的搜索请求文本并通过比较新的搜索请求文本来防止重复请求。然而，这不是一个干净的解决方案。

如上所示的原始代码会导致重复请求。

但是， newRequestDuplicatesHandler 可以解决问题。但这不是一个干净的解决方案。

标签： reactjsautocompletematerial-ui