So implementieren Sie Eingabeaufforderungen vor der Deinstallation der React-Komponente, dem Routensprung und dem Schließen der Seite (Aktualisierung)

Der Inhalt dieses Artikels befasst sich mit den Implementierungsmethoden der React-Komponenten-Deinstallation, dem Routing-Sprung und den Eingabeaufforderungen vor dem Schließen der Seite (erfrischend). Ich hoffe, dass er hilfreich ist Du hast geholfen.

Der Lebenszyklus der React-Komponente, der Routing-Sprung und das Schließen der Seite sehen etwas ähnlich aus. Beispielsweise ist die aktuelle Komponente im Begriff, aus dem Ansichtsfenster zu verschwinden, aber tatsächlich sind die ausgelösten Ereignisse nicht dieselben . Beginnen wir mit einem praktischen Fall:

Ein Benutzer auf der Artikelbearbeitungsseite einer Single-Page-Anwendung bearbeitet einen Artikel, hat ihn aber noch nicht gespeichert.

Wenn der Benutzer versehentlich zu einer anderen Route springt, muss er daran erinnert werden, ob er mit dem Springen fortfahren soll.

Und der Benutzer klickt versehentlich auf die Schaltfläche zum Schließen der Registerkarte , oder die Seite aktualisiert. Dieser Prozess löst das Ereignis zum Entladen der Seite aus.

In diesem Fall müssen wir Folgendes implementieren:

1. Ein Eingabeaufforderungsfeld wird angezeigt, wenn der Benutzer zur Seite springt (Routing übernimmt den Verlaufsmodus)

2. Ein Eingabeaufforderungsfeld erscheint, wenn der Benutzer die Seite schließt

componentWillUnmount

Zuallererst ist diese Hook-Funktion eine Funktion, die vor der Komponente aufgerufen wird wird deinstalliert. Dies verhindert nicht, dass die aktuelle Komponente deinstalliert wird. Versuchen Sie also nicht, hier eine Eingabeaufforderung zu erstellen, denn selbst wenn eine Eingabeaufforderung erfolgt, wird die Komponente dennoch deinstalliert und der Artikel verschwindet.

Route Guard-<Prompt/>

Um die erste Funktion zu implementieren, ist eine Beurteilung erforderlich, bevor zur Route gesprungen wird. Der vorherige Routenwächter wurde nach react-router-dom 4.0 abgebrochen (eigentlich habe ich die vorherige Version nicht studiert, diese Beschreibung stammt aus dem Internet). Nach react-router-dom 4.0 können Sie sich auf die Komponente <Prompt/> verlassen, um diese Funktion zu implementieren. Dokumentlink↗

Fügen Sie diese Komponente zu einem beliebigen Teil Ihrer Artikelbearbeitungsseitenkomponente hinzu

import {Prompt} from 'react-router-dom';
const Editor=()=>{
    return (
        <div>
          <Prompt
            when={true}
            message={location => '文章要保存吼，确定离开吗？'}
          />
        </div>
    )
}

Hier ist zu beachten, dass Ihre Route bei Verwendung von <Prompt/> springt. Es muss sein kann über implementiert werden und kann nicht auf dem Tag basieren.
Wenn Sie auf „Abbrechen“ klicken, bleiben Sie auf der aktuellen Seite. Bisher wurde die Funktion implementiert, den Benutzer bei Routing-Sprüngen an das Speichern zu erinnern.

Fensterschließereignis vor dem Entladen

Um die zweite Funktion zu implementieren, müssen Sie sich auf die Überwachung des Fensters verlassen. Die Anwendung von Fensterereignissen in React-Anwendungen ist weitaus seltener als die von DOM-Ereignissen, daher ist sie mir schon lange nicht mehr begegnet und sie ist immer noch etwas ungewohnt. Das Wichtigste ist: Wann sollte eine Überwachung durchgeführt werden?

Sollte auf Ereignisse warten, wenn die Komponente gemountet ist, und die Ereignisüberwachung entfernen, wenn die Komponente nicht gemountet ist. Da ich begonnen habe, die neuen Funktionen von Hooks vollständig zu übernehmen, wird hier useEffect verwendet.

import React,{useEffect} from 'react';

const Editor=()=>{

 //监听窗口事件
    useEffect(() => {
        const listener = ev => {
            ev.preventDefault();
            ev.returnValue='文章要保存吼，确定离开吗？';
        };
        window.addEventListener('beforeunload', listener);
        return () => {
            window.removeEventListener('beforeunload', listener)
        }
    }, []);
    
//return ...
}

Hier gibt es ein paar Dinge zu beachten:

1 Der zweite Parameter von useEffect ist ein leeres Array, was bedeutet, dass nur zwei Hooks, ComponentDidMount und ComponentWillUnmount, aufgerufen werden

2, der zweite Parameter der Ereignisüberwachung und -entfernung ist die gleiche Ereignisverarbeitungsfunktion

3. Bestätigung, Eingabeaufforderung und Warnung im Beforeunload-Ereignis werden ignoriert. Stattdessen gibt es ein integriertes Browser-Dialogfeld. (Referenz:

MDN|beforeunload)

4. Es muss ein Rückgabewert vorhanden sein und es handelt sich um eine nicht leere Zeichenfolge. In einigen Browsern wird dieser Wert jedoch nicht als Popup verwendet Nachricht

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Eingabeaufforderungen vor der Deinstallation der React-Komponente, dem Routensprung und dem Schließen der Seite (Aktualisierung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!