Eine kurze Analyse kontrollierter und unkontrollierter Komponenten in React
Unkontrollierte KomponentenDie Formulardaten werden vom DOM selbst verarbeitet. Das heißt, es wird nicht von setState() gesteuert und ähnelt der herkömmlichen HTML-Formulareingabe. Der Eingabewert zeigt den neuesten Wert (unter Verwendung von ref, um den Formularwert vom DOM abzurufen). 1. Unkontrollierte Komponenten
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</Kopf>
<Text>
<!--Bereiten Sie einen Behälter vor-->
<div id="test"></div>
<!--React-Kernbibliothek vorstellen-->
<script src="../js/react.development.js"></script>
<!--Führen Sie react-dom ein, um die React-Operation dom zu unterstützen-->
<script src="../js/react-dom.development.js"></script>
<!--Führen Sie Babel ein, um jsx in js zu konvertieren-->
<script src="../js/babel.min.js"></script>
<!--Führen Sie Prop-Typen ein, um die Tag-Eigenschaften von Komponenten einzuschränken-->
<script src="../js/prop-types.js"></script>
<Skripttyp="text/babel">
Klasse Login erweitert React.Component {
meinRef1 = React.createRef();
myRef2 = React.createRef();
handleSubmit = (Ereignis) => {
event.preventDefault() // Formularübermittlung verhindern const username = this.myRef1.current
const Passwort = this.myRef2.current
alert(`Der von Ihnen eingegebene Benutzername lautet: ${username.value}, das von Ihnen eingegebene Passwort lautet: ${password.value}`)
}
rendern() {
zurückkehren (
<form onSubmit={this.handleSubmit}>
Benutzername: <input ref={this.myRef1} type="text"/>
Passwort: <input ref={this.myRef2} type="text"/>
<button>Anmelden</button>
</form>
)
}
}
ReactDOM.render(<Anmelden/>,document.getElementById('test'))
</Skript>
</body>
</html> Kontrollierte KomponentenIn HTML werden die Werte der Tags <input>, <textarea> und <select> normalerweise basierend auf der Benutzereingabe aktualisiert. In React wird der veränderbare Status normalerweise in der Statuseigenschaft einer Komponente gespeichert und kann nur mit setState() aktualisiert werden. Die React-Komponente, die das Formular rendert, steuert auch, was mit diesem Formular bei nachfolgenden Benutzereingaben geschieht. Auf diese Weise ändern von React gesteuerte Eingabeformularelemente ihre Werte, was als „gesteuerte Komponente“ bezeichnet wird. 2. Kontrollierte Komponenten (kontrolliert)
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</Kopf>
<Text>
<!--Bereiten Sie einen Behälter vor-->
<div id="test"></div>
<!--React-Kernbibliothek vorstellen-->
<script src="../js/react.development.js"></script>
<!--Führen Sie react-dom ein, um die React-Operation dom zu unterstützen-->
<script src="../js/react-dom.development.js"></script>
<!--Führen Sie Babel ein, um jsx in js zu konvertieren-->
<script src="../js/babel.min.js"></script>
<!--Führen Sie Prop-Typen ein, um die Tag-Eigenschaften von Komponenten einzuschränken-->
<script src="../js/prop-types.js"></script>
<Skripttyp="text/babel">
Klasse Login erweitert React.Component {
// Status initialisieren state = {
Benutzername: '',
Passwort: ''
}
// Benutzernamen im Status speichern saveUsername = (e) => {
this.setState({Benutzername: e.target.value})
}
//Speichere das Passwort im Status savePassword = (e) => {
this.setState({Passwort: e.Zielwert})
}
handleSubmit = (e) => {
e.preventDefault() // Formularübermittlung verhindern const {username,password} = this.state
alert(`Der von Ihnen eingegebene Benutzername lautet: ${username}, das von Ihnen eingegebene Passwort lautet: ${password}`)
}
rendern() {
// onChange Änderungen return (
<form onSubmit={this.handleSubmit}>
Benutzername: <input onChange={this.saveUsername} type="text"/>
Passwort: <input onChange={this.savePassword} type="text"/>
<button>Anmelden</button>
</form>
)
}
}
ReactDOM.render(<Anmelden/>,document.getElementById('test'))
</Skript>
</body>
</html>
BeachtenIm Allgemeinen werden kontrollierte Komponenten häufiger verwendet, da ref in unkontrollierten Komponenten mehrfach verwendet wird und in der offiziellen Dokumentation steht: „Verwenden Sie ref nicht zu häufig.“ Eine zu häufige Verwendung führt zu Effizienzproblemen. abschließendSowohl kontrollierte als auch unkontrollierte Elemente haben ihre Vorteile und die Wahl hängt von der jeweiligen Situation ab. Wenn das Formular im Hinblick auf das UI-Feedback sehr einfach ist, ist es völlig in Ordnung, den Verweis zu steuern, d. h. eine unkontrollierte Komponente zu verwenden.
Oben finden Sie eine kurze Analyse der Details zu kontrollierten und unkontrollierten Komponenten in React. Weitere Informationen zu kontrollierten und unkontrollierten Komponenten in React finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Ein Protokoll einer Notfallreaktion nach einem Einbruch in einen Linux-Server (Zusammenfassung)
>>: Beispielskript für inkrementelle MySQL-Sicherungs- und Breakpoint-Wiederherstellung
Artikel empfehlen
Anleitung zum Zurücksetzen des MySQL/MariaDB-Root-Passworts
Vorwort Vergessene Passwörter sind ein Problem, d...
Lösung für das Problem, dass Xshell keine Verbindung zur virtuellen VirtualBox-Maschine herstellen kann
Lassen Sie uns zunächst den Netzwerkeinstellungsm...
Die 9 besten ausländischen Websites mit kostenlosem Bildmaterial
Es ist schwierig, Websites mit gutem Bildmaterial...
So führen Sie das React-Projekt auf dem offiziellen WeChat-Konto aus
Inhaltsverzeichnis 1. Verwenden Sie das „A“-Tag, ...
Implementierung der CSS-Auswahl von untergeordneten Elementen für übergeordnete Elemente
Normalerweise wählt ein CSS-Selektor von oben nac...
Tutorial zur Oracle-Bereitstellung in einer Linux-Umgebung
1. Umgebung und zugehörige Software Virtuelle Mas...
Dieser Artikel hilft Ihnen, die spezifische Verwendung von cgroup in Docker gründlich zu verstehen
Inhaltsverzeichnis Was ist cgroup Zusammensetzung...
Spezifische Verwendung zusammengesetzter CSS-Selektoren
Kreuzungsauswahl Der Schnittpunktselektor besteht...
Notieren Sie einen Fehlerbehebungsbericht für die hohe CPU-Auslastung des Tomcat-Prozesses
Dieser Artikel zeichnet hauptsächlich einen Tomca...
Lassen Sie uns über das Problem der Parameterübergabe an React onClick sprechen
Hintergrund In einer Liste wie der folgenden erfo...
Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten
Inhaltsverzeichnis Verwendete APIs Einfaches Beis...
ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse
Inhaltsverzeichnis 1. So führen Sie stapelweise U...
So löschen Sie die Validierungsaufforderung bei der Elementformularvalidierung
Inhaltsverzeichnis Problemszenario: Lösung: 1. Üb...
Was bedeutet href=# in einem Link?
Links zur aktuellen Seite. －－－－－－－－－－－－－－－－－－－ Übl...
Erste Schritte mit SELinux
Bereits zu Kernel 2.6-Zeiten wurde ein neues Sich...