单击下拉列表中的文本框在 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

这里有一个建议：使用eventListner

• addEventlisteneron componentDidMount

• removeEventlistener上点击

• addEventlistener当您从下拉列表中选择项目时，再次这样做。