希望 useClickAway 支持条件化触发

[yibird]

目前useClickAway不支持条件化触发,希望添加一个enbale配置(默认为true),只有当true时才触发函数执行。在写弹窗的逻辑时就遇到这个问题了,弹窗使用open控制是否打开,在组件里面使用useClickAway() 即使做了open状态仍无效

[Arktomson]

@yibird
这样可以达到你想要的效果

export default function Chore() {
  const [count, setCount] = useState(0);
  const [open, setOpen] = useState(false);


  const ref = useRef<HTMLDivElement>(null);
  
  useClickAway(() => {
    setCount(count + 1);
  }, open ? ref : null);
  return (
    <>
      <div>count: {count}</div>
      <Button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        add
      </Button>
      <Button
        onClick={(e) => {
          e.stopPropagation();
          setOpen(true);
        }}
      >
        open
      </Button>
      <Modal
        open={open}
        onCancel={() => {
          setOpen(false);
        }}
        onOk={() => {
          setOpen(false);
        }}
      >
        <div ref={ref}>123</div>
      </Modal>
    </>
  );
}