单击下拉列表中的文本框在 ReactJS 中不起作用

Question

我在 react 中创建了一个自定义下拉列表，其中下拉列表打开并关闭它，并且我正在使用 react 状态控制下拉列表的打开和关闭。现在，我想在用户单击下拉列表以启用搜索功能时切换文本框。问题是，当我单击文本框时，事件在下拉列表中启动并被关闭。我试图插入事件，但没有效果。onClickonBluronBlure.stopProagation()onMouseDown

我特此分享我的CodeSandBox URL。您能看一看，让我知道可以做些什么并帮助我解决问题吗？我将非常感激。

Answer 1

您可以检查当前目标以查看它是否包含相关的目标（新关注的项目）onBlur={event => {  if (!event.currentTarget.contains(event.relatedTarget)) {    setDropDownOpen(false);  }}}

Answer 2

我创建了一个非常简单的演示，演示如何解决此问题（请参阅沙盒）。简而言之，我创建了另一个钩子来检查输入焦点当前是否处于活动状态。如果是，则不要在模糊时关闭 div。

Answer 3

这里有一个建议：使用eventListneraddEventlisteneron componentDidMountremoveEventlistener上点击addEventlistener当您从下拉列表中选择项目时，再次这样做。