React-Beispiel zum Abrufen des Werts aus dem Eingabefeld

Reagieren Sie auf mehrere Arten, um den Wert des Eingabefelds abzurufen

• Die erste Methode ist die unkontrollierte Komponentenbeschaffung
• Die zweite Methode besteht darin, die kontrollierte Komponente zu erhalten

Unkontrollierte Komponente erhält Referenz

importiere React, {Component} von „react“;
exportiere Standardklasse App erweitert Komponente {
 suchen(){
 const inpVal = dieser.Eingabe.Wert;
 Konsole.log(inpVal);
 }
 
 machen(){
 zurückkehren(
  <div>
  <input type="text" ref={input => this.input = input} defaultValue="Hallo"/>
  <button onClick={diese.search.bind(diese)}></button>
  </div>
 )
 }
}

Verwenden Sie defaultValue, um den Standardzustand einer Komponente darzustellen. Es wird nur einmal gerendert und nachfolgendes Rendering funktioniert nicht. Der Wert der Eingabe ändert sich nicht durch externe Änderungen, sondern wird durch seinen eigenen Zustand geändert.

Kontrollierte Komponente this.setState({})

importiere React, {Component} von „react“;
exportiere Standardklasse App erweitert Komponente {
 Konstruktor (Requisiten) {
 super(Requisiten);
 dieser.Zustand = {
  Eingabewert:''
 }
 }
 
 handelChange(e){
 dies.setState({
  inpValue:e.Ziel.Wert
 })
 }
 
 machen(){
 zurückkehren(
  <div>
  <input type="text" onChange={this.handelChange.bind(this)} defaultValue={this.state.inpValu}/>
  </div>
 )
 }
}

Der Wert des Eingabefelds ändert sich, wenn sich die Benutzereingabe ändert. onChange ruft den geänderten Status über Objekt e ab und aktualisiert den Status. setState löst die Ansichtsdarstellung entsprechend dem neuen Status aus, um die Aktualisierung abzuschließen.

Dies ist das Ende dieses Artikels über die Verwendung von React zum Abrufen des Werts eines Eingabefelds. Weitere Informationen zur Verwendung von React zum Abrufen des Werts eines Eingabefelds finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!