如何偵測 React 元件外部的點擊？

如何偵測React 元件外部的點擊

要偵測React 元件外部的點擊，可以使用以下方法：

事件處理

將點擊事件監聽器附加到視窗物件。當按一下事件發生時，將事件的目標元素與元件的 DOM 子元素進行比較。如果目標不是元件的後代，則按一下被視為在元件外部。

使用 DOM 遍歷

要將目標元素與組件的子元素進行比較，可以使用DOM 提供的closest() 或 contains() 方法。

Closest()方法：

closest() 方法檢查一個元素是否是另一個元素的後代。它會傳回與指定選擇器匹配的最近的祖先元素。

const target = event.target;
const componentDOM = document.querySelector('.my-component');
if (!componentDOM.closest('.my-component')) {
  // Click occurred outside the component
}

Contains() 方法：

contains() 方法檢查一個元素是否包含另一個元素。它會傳回一個布林值，指示該元素是否是另一個元素的後代。

const target = event.target;
const componentDOM = document.querySelector('.my-component');
if (!componentDOM.contains(target)) {
  // Click occurred outside the component
}

引用管理

要存取元件的 DOM 元素，可以使用 React refs。為元件的元素指派一個引用，然後使用該引用來查詢 DOM。

函數元件範例：

function OutsideAlerter(props) {
  const wrapperRef = useRef(null);

  useOutsideAlerter(wrapperRef);

  return <div ref="{wrapperRef}">{props.children}</div>;
}

function useOutsideAlerter(ref) {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        alert('You clicked outside of me!');
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [ref]);
}

類別元件範例：

class OutsideAlerter extends Component {
  constructor(props) {
    super(props);

    this.wrapperRef = React.createRef();
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  handleClickOutside = (event) => {
    if (this.wrapperRef.current && !this.wrapperRef.current.contains(event.target)) {
      alert('You clicked outside of me!');
    }
  }

  render() {
    return <div ref="{this.wrapperRef}">{this.props.children}</div>;
  }
}

透過使用這些技術，您可以準確地偵測React 元件以外的點擊，提供更好的使用者體驗和效能最佳化。

以上是如何偵測 React 元件外部的點擊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！