Wie behebe ich die Warnung „Unkontrollierte in kontrollierte Eingabekonvertierung“ in ReactJS?

Umgang mit Warnungen zur Konvertierung von unkontrollierten in kontrollierte Eingaben in ReactJS

ReactJS warnt Entwickler, wenn eine Komponente ein unkontrolliertes Eingabeelement in ein kontrolliertes übergeht. Dieser Fehler ist mit der folgenden Meldung verbunden:

Warnung: Eine Komponente ändert eine unkontrollierte Eingabe vom Typ „Text“ in „kontrolliert“. Eingabeelemente sollten nicht von unkontrolliert in kontrolliert wechseln (oder umgekehrt). Entscheiden Sie zwischen der Verwendung eines kontrollierten oder unkontrollierten Eingabeelements für die Lebensdauer der Komponente.

Die Ursache verstehen

Der Fehler tritt auf, wenn der Status einer Komponente ein Eingabefeld als unkontrolliert initialisiert (d. h. ohne einen kontrollierten Wertwert), aber später seinen Wert festlegt und ihn effektiv in eine kontrollierte Eingabe überführt.

Beispielcode

Bedenken Sie den folgenden Codeausschnitt:

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

...

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")}
        type="text"
        refs="name"
        placeholder="Name *"
      />
    </div>
  )
}</code>

In diesem Beispiel ist der Status zunächst ein leeres Objekt, wodurch das Eingabefeld unkontrolliert wird. Wenn der Feldwert jedoch festgelegt ist, wird die Eingabe kontrolliert und verursacht die Warnung.

Mögliche Lösungen

Um das Problem zu beheben, ziehen Sie die folgenden Lösungen in Betracht:

1. Feldwerte im Status initialisieren: Definieren Sie das Eingabefeld im Anfangsstatus mit einem Platzhalterwert. Zum Beispiel:

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

2. Kurzschlussauswertung verwenden: Legen Sie die Wertprop zur Verwendung der Kurzschlussauswertung fest, um undefinierte Werte zu verarbeiten. Zum Beispiel:

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

Durch die Implementierung dieser Lösungen können Sie sicherstellen, dass Ihre Eingabeelemente in einem konsistenten Zustand bleiben und so den unkontrollierten in einen kontrollierten Eingabekonvertierungsfehler vermeiden.

Das obige ist der detaillierte Inhalt vonWie behebe ich die Warnung „Unkontrollierte in kontrollierte Eingabekonvertierung“ in ReactJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!