完全复制:codesandbox link.
我正在try 使用Reaction创建自定义搜索/ Select 组件.我的问题在于事件的执行顺序.
当用户关注文本输入字段时，应该会显示一个带有选项的列表.然后，当用户点击下拉列表中的一项时，元素名称应该填入文本输入字段，然后列表应该隐藏.
我通过创建一个inputFocused布尔状态来实现这一点，并仅在inputFocused为真时呈现列表.我将TWoP事件处理程序附加到文本输入本身:
- _
- _
但当用户点击其中一项时，输入不会被填满.
<input
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
}}
onBlur={() => setInputFocused(false)}
onFocus={() => setInputFocused(true)}
/>
{inputFocused && (
<ul>
<li onClick={() => setSearchTerm(element.name)}>{element.name}</li>
</ul>
}
请判断codesanbox链接以更好地了解.
我想我明白问题所在.onBlur()事件在onClick()事件之前触发.如果我将onBlur回调函数包装在setTimout中，它将按预期工作:
onBlur={() =>
setTimeout(() => {
setInputFocused(false);
}, 100)
}
我希望避免定义setTimeout.
有没有解决方案来确保<li>上的onClick()在<input />上的onBlur()之前执行？