时间戳

首页 > 解决方案 > 反应嵌套在另一个和单击事件中的useRef

reactjs - 反应嵌套在另一个和单击事件中的useRef

问题描述

我正在使用 useRef 来定义单击事件何时发生，如果在我设置的搜索输入之外没有聚焦（这使得结果容器隐藏）和一些特定的样式。

这通常有效，但是我添加了一个清除输入按钮，带有 ref searchClear。问题是，因为这是在 wrapper ref 之上，所以它认为单击 this 而不是单击 wrapper，我不确定如何解决逻辑。

下面代码的问题是，当没有文本输入时，我也会隐藏清除按钮。所以 setWhatFocused(false); 当我有一些输入时触发，结果容器在单击任意位置时显示/隐藏。但如果没有输入（因此没有清除按钮），则 (searchClear.current && !searchClear.current.contains(e.target)) 失败。

const wrapper = useRef(null);
const searchInput = useRef(null);
const searchClear = useRef(null);

useEffect(() => {
  document.addEventListener("click", handleClickOutside, false);
  return () => {
    document.removeEventListener("click", handleClickOutside, false);
  };
}, []);

const handleClickOutside = (e) => {
  if (wrapper.current && !wrapper.current.contains(e.target)) {

    if (searchClear.current && !searchClear.current.contains(e.target)) {
      setWhatFocused(false);
    }

  }
};

我尝试添加以下内容，但它失去了重点样式。

if (!searchClear.current){
    setWhatFocused(false);
}

希望我已经添加了足够的细节来解释。

解决的简单方法是回答以下任何问题：

当一个参考位于我需要检测的参考之上时，我可以检测到点击吗？我可以多次使用相同的参考而不出现问题（如果我可以的话）？

上面没有正面回答，有什么建议吗？

标签： reactjsreact-hooksuse-ref

解决方案

我没有找到确切的解决方案，但最后我改变了它，使元素可见：隐藏并切换它，而不是有条件地渲染实际元素。

推荐阅读