So implementieren Sie ein Abschlussereignis im Reaktionsmodal

So implementieren Sie Abschlussereignisse im React-Modal: 1. Hören Sie sich das Ziel des Browser-Onclick-Ereignisses an. 2. Beurteilen Sie das Klickereignis anhand von „if (e.target != messageRef.current) {setMessageCode(false);}“ "-Anweisung, wenn nicht, führen Sie einfach das schließende Ereignis der modalen Box aus.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, React18-Version, Dell G3-Computer.

Wie implementiert man ein Abschlussereignis im Reaktionsmodal?

Reagieren Sie auf Klicks an anderer Stelle, um die modale Box zu schließen

Prinzip: Ganz einfach, es besteht darin, das Ziel des Browser-Onclick-Ereignisses abzuhören, das Klickereignis zu bestimmen und das Schließereignis auszuführen, wenn es sich nicht um eine modale Box handelt.

Serverseitiges Rendering kann das Fensterobjekt nicht in useEffect abrufen

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

const messageRef = useRef(null);

```

Die Funktionssignatur von useLayoutEffect ist dieselbe wie useEffect, ruft den Effekt jedoch nach allen DOM-Änderungen synchron auf. Damit können Sie das DOM-Layout lesen und synchron ein erneutes Rendern auslösen. Bevor der Browser das Zeichnen durchführt, wird der Aktualisierungsplan in useLayoutEffect synchron aktualisiert.

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Abschlussereignis im Reaktionsmodal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!