Formulare sind auf jeder Website für die Anmeldung, Anmeldung oder was auch immer wirklich wichtig. Es ist einfach, ein Formular zu erstellen, aber Formulare in React funktionieren etwas anders. Wenn Sie ein einfaches Formular in React erstellen, funktioniert es, aber es ist gut, etwas JavaScript-Code zu unserem Formular hinzuzufügen, damit es die Formularübermittlung verarbeiten und vom Benutzer eingegebene Daten abrufen kann. Dazu verwenden wir kontrollierte Komponenten.
Kontrollierte Komponenten: In einfachen HTML-Elementen wie dem Input-Tag wird der Wert des Eingabefelds geändert, wenn der Benutzer etwas eingibt. Aber in React speichern wir den Wert, den der Benutzer eingibt, im Zustand und übergeben denselben Wert an das Eingabe-Tag als seinen Wert, sodass sein Wert hier nicht von DOM geändert wird, er wird vom Reaktionszustand gesteuert. Das mag kompliziert klingen, aber lassen Sie es uns anhand eines Beispiels verstehen.

Erstellen Sie zuerst die React-App und aktualisieren Sie in Ihrem Projektverzeichnis Ihre index.js -Datei aus dem src-Ordner.

src index.js:
 

import React from 'react';
import ReactDOM from 'react-dom';
  
class App extends React.Component {
    
    onInputChange(event) {
        console.log(event.target.value);
    }
    
    render() {
        return (
            <div>
                <form>
                    <label>Enter text</label>
                    <input type="text"
                        onChange={this.onInputChange}/>
                </form>
            </div>
        );
    }
}
  
ReactDOM.render(<App />,
            document.querySelector('#root'));

Im obigen Beispiel ist das Eingabeelement unabhängig vom Wert user type im DOM unkontrolliert. Wir protokollieren diesen Wert in der Konsole, indem wir ihn aus dem DOM abrufen, und die Methode onInputChange wird jedes Mal aufgerufen, wenn der Benutzer etwas eingibt, sodass der Wert jedes Mal auf der Konsole gedruckt wird (Strg + Umschalt + F11), wenn der Google Chrome-Benutzer es öffnet die Konsole.
React wird verwendet, um den Wert von Benutzereingaben zu verarbeiten. 
 

Bearbeiten Sie src/index.js mit dem angegebenen Code:

Quelle index.js:

import React from 'react';
import ReactDOM from 'react-dom';
  
class App extends React.Component {
    
    state = { inputValue: '' };
    
    render() {
        return (
        <div>
            <form>
                <label> Enter text </label>
                <input type="text"
                    value={this.state.inputValue}
                    onChange={(e) => this.setState(
                    { inputValue: e.target.value })}/>
            </form>
            <br/>
            <div>
                Entered Value: {this.state.inputValue}
            </div>
        </div>
        );
    }
}
  
ReactDOM.render(<App />,
            document.querySelector('#root'));

Was passiert im obigen Reaktionsbeispiel, wenn wir den inputValue-Zustand mit dem Wert null gemacht haben und der Wert dieses Zustands dem Eingabefeld bereitgestellt wird, was bedeutet, was auch immer der Wert des inputValue ist, wir werden ihn im Eingabefeld sehen. Und wir aktualisieren den Wert von inputValue jedes Mal, wenn der Benutzer den Wert in der Eingabe ändert, indem er die Funktion setState() aufruft und dom neu rendert, weil wir den Wert von inputValue mit setState() ändern. Hier können wir den Wert ganz einfach für jeden Benutzertyp im Eingabefeld abrufen und ihn aus dem React-Zustand an eine beliebige Stelle weitergeben. Dasselbe passiert mit anderen Elementen wie dem Textbereich und der Auswahl. Hier ist ein weiteres Beispiel, das verhindert, dass der Browser das Formular automatisch absendet.

src index.js bearbeiten:
 

import React from 'react';
import ReactDOM from 'react-dom';
  
class App extends React.Component {
    
    state = { inputValue: '' };
  
    onFormSubmit = (event) => {
        event.preventDefault();
        this.setState({ inputValue: 'Hello World!'});
    }
    
    render() {
    
        return (
        <div>
            <form onSubmit={this.onFormSubmit}>
                <label> Enter text </label>
                <input type="text"
                value={this.state.inputValue}
                onChange={(e) => this.setState(
                { inputValue: e.target.value })}/>
            </form>
            <br/>
            <div>
                Entered Value: {this.state.inputValue}
            </div>
        </div>
        );
    }
}
  
ReactDOM.render(<App />,
        document.querySelector('#root'));

Ausgabe:

Hier fügen wir einfach den Ereignishandler onSubmit hinzu, der die Funktion onFormSumbit aufruft und den Wert von inputValue durch „Hello World!“ ersetzt, und die Funktion preventDefault() wird verwendet, um zu verhindern, dass der Browser das Formular absendet und die Seite neu lädt.