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
So mounten Sie die CD, um das RPM-Paket unter Linux zu finden
Vorne geschrieben Manchmal müssen Sie bei der Ver...
Beispiel für eine Methode zur Überprüfung des Status einer Linux-Firewall
So überprüfen Sie den Status der Linux-Firewall 1...
Detaillierte Erklärung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile]
Zusammenfassung: Damit Ihre Webseite schöner auss...
Das kreativste 404-Seitendesign der Geschichte verbessert effektiv das Benutzererlebnis der Website
Beim Surfen im Internet stoßen wir nicht oft auf ...
Reiner CSS3-Code zur Implementierung einer laufenden Uhr
Wirkung der OperationCode-Implementierung html &l...
So verwenden Sie den Nginx-Proxy zum Surfen im Internet
Normalerweise verwende ich nginx als Reverse-Prox...
Es wird nicht empfohlen, den Inhalt in Word direkt in den Editor auf der Website zu kopieren.
<br />Frage: Warum ist es nicht empfehlenswe...
Vier völlig unterschiedliche Erfahrungen im Interaktionsdesign der Apple Watch enthüllt
Heute geht es noch immer um das Design von Watch-...
Mehrere gängige Methoden zum Senden von Anfragen mit Axios in React
Inhaltsverzeichnis Installieren und Einführen von...
Analyse der Prinzipien der MySQL Slow Query-bezogenen Parameter
MySQL Slow Query, dessen vollständiger Name „Slow...
Detaillierte Erläuterung der grundlegenden Befehle des Docker-Ausführungsprozesses und des Images
Inhaltsverzeichnis 1. Workflow ausführen 2. Grund...
Über die Fallstricke bei der Implementierung der angegebenen Kodierung in MySQL
Vorne geschrieben Umgebung: MySQL 5.7+, MySQL-Dat...
Detaillierte Erklärung, wie Angular mit unerwarteten Ausnahmefehlern umgeht
Vorne geschrieben Unabhängig davon, wie gut der C...
Das native VIDEO-Tag der HTML-Seite verbirgt die Download-Button-Funktion
Beim Schreiben eines Webprojekts stieß ich auf ei...
Eine kurze Diskussion über die Leistungsprobleme des MySQL-Paging-Limits
MySQL-Paging-Abfragen werden normalerweise über L...