延迟onBlur回调

Question

我Autocomplete在React中创建了一个组件,当您在文本框中键入时,它会显示建议完成的下拉列表.单击建议应触发回调,当文本框失去焦点时,下拉列表应消失.问题是onBlur文本框的事件在建议的事件之前触发onClick,所以会发生什么:

1. 点击项目
2. 文本框失去焦点=> this.setState(this.getInitialState())
3. 组件重新呈现,没有建议框,因为状态已被清除
4. 点击事件落在建议项目所在的空白区域

如何在不诉诸黑客的情况下解决这个问题的最佳方法是onBlur={setTimeout(() => this.setState(this.getInitialState()), 100)}什么？

Answer 1

找到了一个非常简单的解决方案:mousedown在blur触发文本输入之前,事件将触发被点击的结果项.此外,如果mousedown回调调用event.preventDefault(),它会阻止blur事件为输入触发,但不会阻止将来click事件一旦mouseup发生就触发结果项.所以,简而言之,只需将此处理程序添加到结果项即可修复所有内容:onMouseDown={event => event.preventDefault()}