延迟Blur回调

Question

我在React中制作了一个​​3210组件，当您在文本框中键入内容时，它会显示建议完成的下拉列表。点击一个建议应该触发一个回调，并且当文本框失去焦点时下拉应该消失。问题是，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()}

Answer 2

看起来像有一个开源​​3210成分，他们不得不应对this exact problem。