React useRef嵌套在另一个和点击事件

Question

我使用useRef来定义点击事件发生的时间，如果在搜索输入之外，我设置不焦点(这使得结果容器隐藏)和一些特定的样式。

这通常工作，但我添加了一个清除输入按钮，与ref searchClear。问题是，因为这是在包装器的顶部ref它看到点击这个不是点击包装器，我不确定如何解决的逻辑。

下面代码的问题是，当没有文本输入时，我也隐藏了清除按钮。所以setWhatFocused(假);触发时，我有一些输入和结果容器显示/隐藏时，单击任何地方。但是，如果没有输入(因此没有清除按钮)，则(searchClear。当前,,! 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);
}

希望我已经补充了足够的细节来解释。

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

当一个ref在我需要检测的ref的顶部时，我能检测到click吗?我可以使用相同的ref几次没有问题下线(如果我可以)?

以上没有正面的答案，有什么建议吗?

Answer 1

我没有找到一个确切的解决方案，但最后我改变了它，所以元素是可见的:隐藏和切换，而不是实际的元素被有条件地呈现。