React 使用自定义钩子检测组件外的点击

Question

当我在其他 StackOverflow 响应中阅读时，我正在尝试创建一个自定义钩子，以检测组件外的点击。 我不确定我在这里缺少什么，但有些东西不正常。 该事件只需要附加到复选框下拉菜单，这样当用户打开下拉菜单并在菜单外单击时，它会自动关闭。 虽然它看起来有效，但您可以注意到，虽然下拉菜单在用户单击外部时关闭，但它也会阻止您勾选输入。

在此处检查我的代码： SandBox任何帮助将不胜感激

Answer 1

我认为这只是一个错字。 在您的沙箱中，我像这样修复了 handleClickOutside：

  const handleClickOutside = (event) => {
    console.log(event.target);
    if (ref.current && !ref.current.contains(event.target)) {
      setIsComponentVisible(false);
    }
  };

!ref.current.contains(event.target) 中的“目标”中缺少“t”

它现在对你有用吗？