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

React コンポーネント外部のクリックの検出

提示されたシナリオには、特定のコンポーネントの外部で発生するクリック イベントの検出が含まれます。 jQuery の最も近い() メソッドは通常、クリック イベント ターゲットがコンポーネントの DOM 要素を親として持っているかどうかをチェックし、コンポーネント内のクリックを示します。

ES6 実装

提供されるES6 ソリューションは、引数として ref を取る useOutsideAlerter フックを利用します。フック内で、クリック ハンドラーがドキュメントに追加されます。クリックが発生すると、ターゲットが参照の現在の要素に対してチェックされます。ターゲットがコンポーネント内に含まれていない場合、アラートが表示されます。

OutsideAlerter コンポーネントは子コンテンツをラップし、そのコンテナの参照にフックを適用します。コンテナの外側をクリックすると、アラートがトリガーされます。

クラスベースの実装 (React 16.3 以降)

この実装では、OutsideAlerter コンポーネントはコンポーネントを拡張し、ライフサイクルを定義します。方法。 ComponentDidMount メソッドとcomponentWillUnmount メソッドは、それぞれドキュメントにクリック ハンドラーを追加および削除します。 handleClickOutside メソッドは、コンポーネントの外側のクリックをチェックし、必要に応じてアラートを表示します。

クラスベースの実装 (React 16.3 より前)

以前は、わずかに異なるアプローチが使用されています。 React 16.3 へ。コンポーネントには、ラッパーの参照を設定する setWrapperRef メソッドがあります。 handleClickOutside メソッドは、コンポーネントの外側のクリックをチェックし、必要に応じてアラートを表示します。

実装に関係なく、これらのソリューションにより、特定の React コンポーネントの外側のクリック イベントを検出できるようになり、ユーザー インタラクションの制御が強化されます。

以上がReact コンポーネントの外側のクリックを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。