我在react中创建了一个自定义下拉列表，其中在onClick上下拉列表打开，在onBlur上关闭它&我用反应状态控制下拉菜单的打开和关闭。现在，我想在用户单击下拉菜单以启用搜索功能时切换文本框。问题是，当我单击文本框时，onBlur事件在下拉列表中启动并关闭。我尝试在onMouseDown事件中插入e.stopProagation()，但没有效果。
我在此分享我的CodeSandBox URL。你能看看并让我知道可以做些什么来帮助我解决这个问题吗？我将非常感激。
您可以检查currentTarget，看看它是否包含relatedTarget(新关注的项目(
onBlur={event => {
if (!event.currentTarget.contains(event.relatedTarget)) {
setDropDownOpen(false);
}
}}
我创建了一个非常简单的演示，演示了如何解决这个问题(请参阅沙盒(。
简而言之，我创建了另一个钩子，用于检查输入焦点当前是否处于活动状态。如果是，那么不要在blur上关闭div。
这里有一个建议：使用eventListner
- 组件DidMount上的
addEventlistener removeEventlistener单击- 当您从下拉列表中选择项目时，再次
addEventlistener