コンポーネントがReactJSで制御されるタイプのテキストの制御されない入力を変更しています

Question

コンポーネントが制御されるタイプのテキストの制御されない入力を変更しています。入力要素は、制御されていない状態から制御された状態に切り替わるべきではありません（またはその逆）。コンポーネントの寿命の間、制御された入力要素または制御されていない入力要素を使用するかどうかを決めます。

マイコード：

constructor(props) { 
super(props); 
this.state = { 
fields: {}, 
errors: {} 
} 
this.onSubmit = this.onSubmit.bind(this); 
    } 
    ... 

    onChange(field, e){ 
     let fields = this.state.fields; 
     fields[field] = e.target.value; 
     this.setState({fields}); 
     } 
    ... 
    <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 *" 
         /> 
         <span style={{color: "red"}}>{this.state.errors["name"]}</span> 
         </div> 

Answer 1

理由は、あなたが定義された状態で：

this.state = { fields: {} } 

フィールドとして空白オブジェクト最初this.state.fields.nameをレンダリング中undefinedなり、入力フィールドに値をとして取得しますので。

value={undefined} 

入力フィールドがu ncontrolled。

あなたが入力中の任意の値を入力すると、状態のfieldsに変更を取得：

this.state = { fields: {name: 'xyz'} } 

そして、その時の入力フィールドで、あなたがエラーを取得している理由です、制御コンポーネントに変換します：

A component is changing an uncontrolled input of type text to be controlled.

可能なソリューション：

の1- fieldsでの定義状態として：

this.state = { fields: {name: ''} } 

2-またはこのようなShort-circuit evaluationを使用して、Valueプロパティを定義：

value={this.state.fields.name || ''} // (undefined || '') = ''