[解決済み] ReactJSでコンポーネントがtext型の非制御入力を制御エラーに変更する場合

質問

警告 コンポーネントが text 型の非制御入力を制御入力に変更しています。入力要素は非制御型から制御型に(またはその逆に)切り替わるべきではありません。コンポーネントの寿命が尽きるまで、controlled か uncontrolled のどちらかの入力要素を使用するか決めてください。

以下は私のコードです。

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});
}

....

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 *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}

解決方法は？

その理由は、あなたが定義した状態にあります。

this.state = { fields: {} }

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

value={undefined}

そのため、入力欄が制御不能になります。

inputに何らかの値を入力したら。 fields に変更されます。

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

そしてこのとき、入力フィールドは制御されたコンポーネントに変換されます。それが、エラーが発生する理由です。

あるコンポーネントが、制御されていないtextタイプの入力を、制御されるように変更しています。 制御されます。

考えられる解決策

1- 定義 fields を状態にしてください。

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

2- または、value プロパティを定義するために 短絡的な評価 このように

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