Question

我正在使用React ref来处理元素外部的单击。

import { useEffect } from 'react';

export const useClickOutside = (ref, callback = () => {}) => {
  const handleClick = e => {
    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);
};

问题在于，有时ref.current.contains(e.target)返回false，而e.target是ref.current的实际子元素。

我认为发生这种情况是因为ref.current和ref.current的子元素未正确更新。

我对此问题做了一些说明：Imgur

Answer 1

这可能有点晚了，也不是理想的解决方案，但我遇到了同样的问题，只是通过检查点击是否在 react-select 内部来解决它，即。检查 event.target.id 是否包含“react-select”：

const handleClick = (e) => {
    if (ref.current && !ref.current.contains(e.target)) {
        if (!e?.target?.id.includes('react-select')) {
            callback()
        }
    }
}

如果ref.current的子元素发生变化，如何更新react ref？

1 个答案: