Wie vermeide ich den „Fehler beim Übergang von unkontrollierter Eingabe zu kontrollierter Eingabe' in ReactJS?

Fehler beim Übergang von unkontrollierter Eingabe zu kontrollierter Eingabe in ReactJS

React warnt vor dem Wechsel zwischen unkontrollierten und kontrollierten Eingabeelementen. Dieser Fehler tritt typischerweise auf, wenn ein Eingabefeld zunächst Benutzereingaben frei (unkontrolliert) akzeptiert und der Entwickler später versucht, seinen Wert über den Status (kontrolliert) zu steuern.

Code-Snippet:

Der Fehler wird durch den folgenden Code veranschaulicht:

<code class="javascript">constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
}

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
    </div>
  )
}</code>

Ursache:

In diesem Code liegt das Problem im Anfangszustand, in dem sich Felder befinden als leeres Objekt initialisiert. Wenn die Komponente zum ersten Mal gerendert wird, ist this.state.fields.name undefiniert, was die Eingabe zu einer unkontrollierten Komponente macht. Wenn der Benutzer jedoch einen Wert eingibt, werden die Felder aktualisiert, sodass die Eingabe kontrolliert wird.

Mögliche Lösungen:

Um diesen Fehler zu beheben, gibt es zwei Möglichkeiten:

1. Felder mit einem Standardwert initialisieren:

   Felder im Anfangszustand mit einem Standardwert definieren:

   <code class="javascript">this.state = {
     fields: {name: ''}
   }</code>

   Nach dem Login kopieren

2. Kurzschlussauswertung verwenden:

   Kurzschlussauswertung im Wertattribut verwenden, um einen Standardwert bereitzustellen, wenn this.state.fields.name undefiniert ist:

   <code class="javascript"><input value={this.state.fields.name || ''} /></code>

   Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie vermeide ich den „Fehler beim Übergang von unkontrollierter Eingabe zu kontrollierter Eingabe' in ReactJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!