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”

它現在對你有用嗎？