React コンポーネントの外側のクリックを検出するにはどうすればよいですか?

React コンポーネントの外部のクリックを検出する方法

React コンポーネントの外部のクリックを検出するには、次のアプローチを使用できます:

イベント処理

クリック イベント リスナーをウィンドウ オブジェクトにアタッチします。クリック イベントが発生すると、イベントのターゲット要素とコンポーネントの DOM の子を比較します。ターゲットがコンポーネントの子孫ではない場合、クリックはコンポーネントの外部にあると見なされます。

DOM Traversal の使用

ターゲット要素とコンポーネントの子を比較するには、次を使用できます。 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 中国語 Web サイトの他の関連記事を参照してください。