延迟onBlur回调

Question

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

1. 点击项目
2. 文字框失去焦点=＆gt; this.setState(this.getInitialState())
3. 组件重新呈现，没有建议框，因为状态已被清除
4. 点击事件落在建议项目曾经是
的空白区域

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

Answer 1

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

Answer 2

看起来有一个开源Autocomplete组件，他们必须解决this exact problem。