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
Lösung für das Problem des wiederholten Auftauchens des Nachrichten-Popup-Fensters von Element
Inhaltsverzeichnis 1. Verwendung 2. Lösen Sie das...
Node.js+Postman zur Simulation der HTTP-Server- und Client-Interaktion
Inhaltsverzeichnis 1. Node erstellt HTTP-Server 2...
Beispiele für die korrekte Verwendung von Schnittstellen- und Typmethoden in TypeScript
Inhaltsverzeichnis Vorwort Schnittstelle Typ Anha...
Das WeChat-Applet erkennt den Effekt des Wischens nach links zum Löschen von Listenelementen
In diesem Artikel wird der spezifische Code für d...
Wie viele Daten können in einer MySQL-Tabelle gespeichert werden?
Programmierer müssen sich viel mit MySQL befassen...
jQuery implementiert einen Zeitselektor
In diesem Artikelbeispiel wird der spezifische Co...
Lösen Sie das Problem, dass Sie sich bei der Installation von MySQL auf einem Mac mit Homebrew nicht anmelden können
Wenn Ihr Computer ein Mac ist, ist die Verwendung...
Tutorial zur Implementierung von Tabellenladebaumdaten in der Vue-Komponentenbibliothek ElementUI
ElementUI implementiert ein Tutorial zum Laden vo...
Windows Server 2012 Kein Remotedesktoplizenzserver kann eine Lizenz bereitstellen, und die Remotesitzung wird getrennt
Als ich mich heute beim internen Server des Unter...
JavaScript, um einen Lotterieeffekt zu erzielen
In diesem Artikel wird der spezifische JavaScript...
Beispielcode für die Javascript-Operation „Alles auswählen/Alles abwählen“ in HTML
Code kopieren Der Code lautet wie folgt: <html...
Beispiel zur Optimierung der MySQL-Einfügeleistung
MySQL-Leistungsoptimierung Die MySQL-Leistungsopt...
Bei MySQL-Zeichentypen wird die Groß-/Kleinschreibung beachtet.
Standardmäßig sind MySQL-Zeichentypen nicht case-...
Implementierungsbeispiel für die Angabe der Container-IP beim Erstellen eines Containers in Docker
Wenn Docker einen Container erstellt, verwendet e...
Probleme bei der Verwendung von Azure Container Registry zum Speichern von Bildern
Azure Container Registry ist ein verwalteter, ded...