clickOutside 挂钩触发内部 select

Question

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

我遇到的问题是，在 select2 可见的情况下，如果您使用任何 select 并单击一个选项，它会注册为卡片外的单击并隐藏 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>
  );
};

这是我使用的外部点击挂钩

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

Answer 1

我试图根据您共享的代码重新创建您的案例。但是我 'built' 的版本有效。

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

请参阅我在 https://codesandbox.io/s/serverless-dust-njw0f?file=/src/Component.tsx

上制作的问题草稿

clickOutside 挂钩触发内部 select

clickOutside hook triggers on inside select

typescript

reactjs

antd

react-hooks