Was sind kontrollierte Komponenten in React

In React ist eine kontrollierte Komponente eine Komponente, die den Status verwendet, um den Wert eines Eingabeelements abzurufen und festzulegen. Es kann auch verstanden werden, dass die React-Komponente, die das Formular rendert, auch die Vorgänge steuert, die während des Benutzers auf dem Formular ausgeführt werden Eingabeprozess und wird auf diese Weise von React gesteuert. Das Formulareingabeelement, das einen Wert annimmt, wird als kontrollierte Komponente bezeichnet.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was sind kontrollierte Komponenten in React? Auf der offiziellen Website von React werden kontrollierte Komponenten wie folgt erläutert: Die React-Komponente, die das Formular rendert, steuert auch die Vorgänge, die während der Benutzereingabe auf dem Formular ausgeführt werden. Formulareingabeelemente, deren Werte auf diese Weise von React gesteuert werden, werden als „kontrollierte Komponenten“ bezeichnet.

Komponenten, die den Status verwenden, um den Wert von Eingabeelementen abzurufen und festzulegen, werden als gesteuerte Komponenten bezeichnet. Tags wie 23efcc05e98690ceeb219581933e4231, 4750256ae76b6b9d804861d8f69e79d3 können alle das Wertattribut verwenden, um kontrollierte Komponenten zu implementieren.

Einige Internetnutzer haben dies erklärt: In React wird der Status des Formulars immer dann in den Status der Komponente geschrieben, wenn dieser Komponententyp in React als kontrollierte Komponente bezeichnet wird.

Aktualisierungsprozess gesteuerter Komponenten:

1, Sie können den Standardwert des Formulars im Anfangszustand festlegen

2, wann immer sich der Wert des Formulars ändert, rufen Sie den onChange-Ereignishandler auf,

3, Ereignishandler Get den geänderten Status über das Ereignisobjekt e und den Status ändern;

4, setState löst die Ansichtsaktualisierung aus, um die Aktualisierung des Formularkomponentenwerts abzuschließen

Beispiel: Eingabe

- Formularübermittlung verhindern

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({ value: event.target.value });
    }
    handleSubmit(event) {
        alert('提交的名字: ' + this.state.value);
        event.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    名字:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

- Dateityp Eingabe

// file类型的input，属性value是只读的，所以是非受控组件
<input type="file" />

empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas sind kontrollierte Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!