Comment implémenter un événement de clôture dans le modal React

Comment implémenter les événements de fermeture dans le mode de réaction : 1. Écoutez la cible de l'événement onclick du navigateur ; 2. Jugez l'événement de clic via le "if (e.target != messageRef.current) {setMessageCode(false);} ", sinon exécutez simplement l'événement de fermeture de la boîte modale.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version React18, ordinateur Dell G3.

Comment implémenter un événement de clôture dans le modal React ?

Réagissez aux clics ailleurs pour fermer la boîte modale

Principe : Très simple, il s'agit d'écouter la cible de l'événement onclick du navigateur, de déterminer l'événement clic, et d'exécuter l'événement de fermeture s'il ne s'agit pas d'une boîte modale.

Le rendu côté serveur ne peut pas obtenir l'objet window dans useEffect

useLayoutEffect(() => {
    window.addEventListener("click", (e) => {
      if (e.target != messageRef.current) {
        setMessageCode(false);
      }
    });
  }, []);```

const messageRef = useRef(null);

```

La signature de fonction de useLayoutEffect est la même que celle de useEffect, mais elle appellera l'effet de manière synchrone après toutes les modifications du DOM. Vous pouvez l'utiliser pour lire la disposition du DOM et déclencher un nouveau rendu de manière synchrone. Avant que le navigateur n'effectue le dessin, le plan de mise à jour dans useLayoutEffect sera actualisé de manière synchrone.

Apprentissage recommandé : "Tutoriel vidéo React"

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!