时间戳

首页 > 解决方案 > 单击下拉菜单中的文本框在 ReactJS 中不起作用

javascript - 单击下拉菜单中的文本框在 ReactJS 中不起作用

问题描述

我在反应中创建了一个自定义下拉菜单，onClick下拉菜单打开并onBlur关闭它，我正在控制下拉菜单的打开和关闭与反应状态。现在我想在用户单击下拉菜单以启用搜索功能时切换文本框。问题是，当我单击文本框时，onBlur事件在下拉菜单中触发并关闭。我试图插入e.stopProagation()事件onMouseDown但没有效果。

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

标签： javascriptreactjs

解决方案

您可以检查 currentTarget 以查看它是否包含relatedTarget（新聚焦的项目）

onBlur={event => {
  if (!event.currentTarget.contains(event.relatedTarget)) {
    setDropDownOpen(false);
  }
}}

推荐阅读