React erhält den Eingabewert und übermittelt 2 Methodenbeispiele

Methode 1: Verwenden Sie das Zielereignisattribut des von DOM bereitgestellten Ereignisobjekts, um den Wert abzurufen und zu übermitteln

importiere React von „react“;
 
Klasse InputDemo erweitert React.Component{
  Zustand = {
    InputValue: "", //Wert in Eingabefeld eingeben};
 
  handleGetInputValue = (Ereignis) => {
    dies.setState({
      Eingabewert: Ereignis.Ziel.Wert,
    })
  };
 
  handlePost = () => {
    const {InputValue} = dieser.Zustand;
    console.log(Eingabewert,'------Eingabewert');
    //Führen Sie hier Übermittlungsvorgänge aus, wie z. B. das Senden von Dispatches usw.};
 
  machen(){
    zurückkehren(
      <div>
        <Eingabe
          Wert={dieser.Zustand.Eingabewert}
          beiÄnderung={this.handleGetInputValue}
        />
        <button onClick={this.handlePost}>Senden</button>
      </div>
    )
  }
}
 
Standard-InputDemo exportieren;

Die beiden <input /> und <button /> sind hier HTML-Tags. Natürlich können Sie auch die Komponenten <Input /> und <Button /> von Antd verwenden, und der Inhalt bleibt unverändert.

Definieren Sie zunächst InputValue:" im Status oben in der Komponente und schreiben Sie value={this.state.InputValue} in das <input /> darunter. Wenn das onChange-Ereignis entfernt wird, kann zu diesem Zeitpunkt nichts in das Eingabefeld eingegeben werden, da

React ist der Ansicht, dass alle Zustände durch den Zustand von React gesteuert werden sollten. Solange Eingabesteuerelemente wie <input />, <textarea /> und <select /> mit einem Wert festgelegt sind, basieren ihre Werte immer auf dem festgelegten Wert. Wenn der Wert nicht geändert wurde, wird sich der Wert nicht ändern.

In React ist setState erforderlich, um den Inhalt einer Komponente zu aktualisieren. Sie müssen daher auf das onChange-Ereignis des Eingabefelds hören, den Inhalt des Eingabefelds abrufen und den InputValue des Status über setState aktualisieren, damit der Inhalt von <input /> in Echtzeit aktualisiert wird.

Lassen Sie uns über die handleGetInputValue-Methode von onChange sprechen, die das Zielereignisattribut des DOM-Ereignisobjekts verwendet:

Die Zieleigenschaft gibt den Zielknoten des Ereignisses zurück (den Knoten, der das Ereignis ausgelöst hat), beispielsweise das Element, Dokument oder Fenster, das das Ereignis generiert hat.

Weitere Einzelheiten finden Sie in der Einführung zum W3C-Standard.

Methode 2: Verwenden Sie Reacts Ref, um auf DOM-Elemente zuzugreifen und Werte zu übermitteln

Zustandsloses Schreiben von Komponenten:

const InputDemo = () => {
  let Eingabewert;
  const handlePost = (e) => {
    wenn (e) e.preventDefault();
    const valueTemp = Eingabewert.Wert;
    console.log(WertTemp, '------WertTemp');
    //Führen Sie hier Übermittlungsvorgänge aus, wie z. B. das Senden von Dispatches usw.};
 
  zurückkehren (
    <div>
      <form onSubmit={handlePost}>
        <Eingabe
          ref={Eingabe => Eingabewert = Eingabe}
        />
        <button onClick={handlePost}>Senden</button>
      </form>
    </div>
  )
};
 
Standard-InputDemo exportieren;

Schreiben von zustandsbehafteten Komponenten:

importiere React von „react“;
 
Klasse InputDemo erweitert React.Component {
  handlePost = (e) => {
    wenn (e) e.preventDefault();
    const valueTemp = dieser.Eingabewert.Wert;
    console.log(WertTemp, '------WertTemp');
    //Führen Sie hier Übermittlungsvorgänge aus, wie z. B. das Senden von Dispatches usw.};
 
  rendern() {
    zurückkehren (
      <div>
        <form onSubmit={this.handlePost}>
          <Eingabe
            ref={Eingabe => dieser.Eingabewert = Eingabe}
          />
          <button onClick={this.handlePost}>Senden</button>
        </form>
      </div>
    )
  }
};
 
Standard-InputDemo exportieren;

Ref ist ein von React bereitgestellter Handle für den sicheren Zugriff auf ein DOM-Element oder eine Komponenteninstanz. Wir können dem Element ein Ref-Attribut hinzufügen und dann den Handle des Elements im DOM-Baum in der Rückruffunktion akzeptieren, der als erster Parameter der Rückruffunktion zurückgegeben wird.

Zusätzlich zu diesen beiden Schreibmethoden können Sie auch die Formularkomponente von Antd verwenden, um Formularfunktionen zu implementieren. Portal: React verwendet die Formularkomponente von Antd, um Formularfunktionen zu implementieren

Zusammenfassen

Dies ist das Ende dieses Artikels über 2 Möglichkeiten, Eingabewerte abzurufen und in React zu übermitteln. Weitere relevante Inhalte zum Abrufen von Eingabewerten und deren Übermittlung in React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM in Zukunft unterstützen!