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!