clickOutside 钩子触发内部选择答案

【问题标题】：clickOutside hook triggers on inside selectclickOutside 钩子触发内部选择
【发布时间】：2021-04-06 13:59:12
【问题描述】：

我有一个卡片组件，它由 2 个选择和一个按钮组成，select1 始终显示，而 select2 在您按下按钮更改状态之前是不可见的。我还有一个 onClickOutside 钩子，当您在卡片外部单击时，它会恢复状态并隐藏 select2。

我遇到的问题是，在 select2 可见的情况下，如果您使用任何选择并单击一个选项，它会注册为卡外的单击并隐藏 select2，我该如何解决这个问题？

这是我的卡片组件中的相关代码：

const divRef = useRef() as React.MutableRefObject<HTMLInputElement>;

const [disableSelect2, setDisableSelect2] = useState(true);

const handleActionButtonClick = () => {
    setDisableSelect2(!disableSelect2)
}

useOutsideClick(divRef, () => {
    if (!disableSelect2) {
      setDisableSelect2(!disableSelect2);
    }
});

return (
    <div ref={divRef}>
      <Card>
         <Select1>[options]</Select1>
         !disableSelect2 ? 
           <Select2>[options]</Select2>
         : null
         <div
          className="d-c_r_action-button"
          onClick={handleActionButtonClick}
        >
      </Card>
    </div>
  );
};

这是我的 useoutsideClick 钩子

const useOutsideClick = (ref:React.MutableRefObject<HTMLInputElement>, callback:any) => {
  const handleClick = (e:any) => {
    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  });
};

额外信息：我使用定制的 antd 组件，无法使用 MaterialUI

【问题讨论】：

您的 handleClick 可能对回调参数有过时的引用
好的，我该如何解决？
您可以使用 useCallback 为您的 handleClick 函数解决这个问题，并将回调参数放在依赖数组中。如果我是你，我会创建一个小测试组件来尝试和调试外部单击自定义挂钩，因为在你的组件中，你的状态和倒置的布尔值太多，无法判断自定义挂钩是否按预期工作。我敢打赌，问题在于您的回调对某些过时的状态值有过时的关闭。
谢谢，我使用下面的答案尝试了一个更独立的版本，钩子工作正常，但是当我将 antd 的 Select 添加到组合中时失败，一定有一些内部的东西我丢失了

标签： reactjs typescript react-hooks antd

【解决方案1】：

我尝试根据您共享的代码重新创建您的案例。但我“构建”的版本有效。

也许您可以通过添加案例中的其他特殊功能使其失败，然后再次提出问题，或者您可以使用那里的工作代码来修复您的问题？

查看我在https://codesandbox.io/s/serverless-dust-njw0f?file=/src/Component.tsx制作的问题草稿

【讨论】：

是的，你是对的，我一直在用你的版本运行一些测试并且它可以工作，直到我将基本的
如果您认为我的回答正确，如果您将其标记为解决方案，我将不胜感激。谢谢。
非常感谢。你的滴答声给了我1000点声望！我们现在都可以关掉互联网了:)