Reagieren - einen unkontrollierten Eingangs Ändern

Question

Ich habe eine einfache reagieren Komponente mit der Form, die ich glaube, einen gesteuerten Eingang haben:

import React from 'react'; 

export default class MyForm extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {} 
    } 

    render() { 
     return (
      <form className="add-support-staff-form"> 
       <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/> 
      </form> 
     ) 
    } 

    onFieldChange(fieldName) { 
     return function (event) { 
      this.setState({[fieldName]: event.target.value}); 
     } 
    } 
} 

export default MyForm; 

Als ich betreiben meine Anwendung ich die folgenden Warnung erhalten:

Warnung: MyForm ändert eine unkontrollierte Eingabe des Texttyps auf gesteuert. Eingangselemente sollten nicht von unkontrolliert zu gesteuert werden (oder umgekehrt). Entscheiden Sie zwischen der Verwendung eines gesteuerten oder unkontrolliertes Eingabeelementes für die gesamte Lebensdauer des Bauteils

Ich glaube, mein Eingang gesteuert wird, da sie einen Wert hat. Ich frage mich, was mache ich falsch?

IREACT ist mit 15.1.0

Answer 1

Ich glaube, mein Eingang gesteuert wird, da sie einen Wert hat.

Damit ein Eingang gesteuert werden kann, muss sein Wert dem einer Zustandsvariablen entsprechen.

Diese Bedingung ist in Ihrem Beispiel zunächst nicht erfüllt, da this.state.name nicht initialisiert ist. Daher ist die Eingabe zunächst unkontrolliert. Sobald der Handler onChange zum ersten Mal ausgelöst wird, wird this.state.name gesetzt. An diesem Punkt ist die obige Bedingung erfüllt und die Eingabe wird als gesteuert betrachtet. Dieser Übergang von unkontrolliert zu kontrolliert erzeugt den oben gesehenen Fehler.

Durch this.state.name im Konstruktor initialisiert:

z.B.

this.state = { name: '' }; 

Der Eingang wird von Anfang an gesteuert, wodurch das Problem behoben wird. Weitere Beispiele finden Sie unter React Controlled Components.

Ohne Bezug zu diesem Fehler sollten Sie nur einen Standard-Export haben. Dein Code oben hat zwei.

Answer 2

Wenn Sie zuerst Ihre Komponente übertragen wird this.state.name nicht gesetzt, so dass es zu undefined auswertet, und Sie am Ende value={undefined} zu Ihrem input vorbei.

Wenn ReactDOM überprüft, ob ein Feld gesteuert wird, it checks to see if value != null (beachten Sie, dass es != ist, nicht !==), und da undefined == null in JavaScript, entscheidet es, dass es unkontrolliert ist.

Wenn also onFieldChange() aufgerufen wird, this.state.name auf einen String-Wert eingestellt ist, wird Ihre Eingabe von unkontrolliert zu gesteuert werden.

Wenn Sie in Ihrem Konstruktor this.state = {name: ''} tun, weil '' != null, Ihre Eingabe wird die ganze Zeit einen Wert haben, und diese Nachricht wird weggehen.

Answer 3

Ein weiterer Ansatz könnte es den Standardwert in Ihrem Eingang werden Einstellung wie folgt aus:

<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/> 

Answer 4

Ich weiß, dass andere dies bereits beantwortet haben. Aber einer der sehr wichtigen Faktor hier, die anderen Menschen mit ähnlichen Problem helfen können:

Sie müssen onChange Handler in Ihrem Eingabefeld hinzugefügt haben (z. B. Textfeld, Kontrollkästchen, Radio, etc). Und behandeln immer Aktivität durch den onChange Handler, wie:

<input ... onChange={ this.myChangeHandler} ... /> 

und wenn Sie mit Checkbox arbeiten dann können Sie seine checked Zustand mit !! wie behandeln müssen:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} > 

Referenz : https://github.com/facebook/react/issues/6779#issuecomment-326314716

Answer 5

I f die Requisiten auf Ihrer Komponente als Staat übergeben wurde

Sie einen Standardwert für Ihre Eingabe-Tags setzen

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>