Comment détecter les clics en dehors d'un composant React ?

Comment détecter les clics en dehors des composants React

Pour détecter les clics en dehors d'un composant React, vous pouvez utiliser l'approche suivante :

Gestion des événements

Attachez un écouteur d'événement de clic à l'objet fenêtre. Lorsque l'événement click se produit, comparez l'élément cible de l'événement avec les enfants DOM du composant. Si la cible n'est pas un descendant du composant, alors le clic est considéré comme étant extérieur au composant.

Utilisation de DOM Traversal

Pour comparer l'élément cible avec les enfants du composant, vous pouvez utiliser les méthodes close() ou contain() fournies par le DOM.

Closest() Méthode :

La méthode la plus proche() vérifie si un élément est le descendant d'un autre élément. Il renvoie l'élément ancêtre le plus proche qui correspond au sélecteur spécifié.

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

Méthode Contains() :

La méthode contain() vérifie si un élément contient un autre élément . Il renvoie un booléen indiquant si l'élément est un descendant de l'autre élément.

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

Gestion des références

Pour accéder à l'élément DOM du composant, vous pouvez utiliser les références React. Attribuez une référence à l'élément du composant, puis interrogez le DOM à l'aide de la référence.

Exemple de composant fonctionnel :

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]);
}

Exemple de composant de classe :

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>;
  }
}

En utilisant ces techniques, vous pouvez détecter avec précision les clics en dehors des composants React, offrant ainsi une meilleure expérience utilisateur et optimisations des performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!