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

Question

我正在使用 React refs 來處理元素外部的點擊。

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 的子元素未正確更新。

我制作了一個問題的小 gif： 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()
        }
    }
}