☰

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

tag-icon • tag-icon javascript reactjs
コンポーネントが、ReactJS でテキストタイプの制御されていない入力を制御された入力に変更しています。質問する

警告: コンポーネントは、テキスト タイプの非制御入力を制御入力に変更しています。入力要素は、非制御入力から制御入力に (またはその逆に) 切り替えるべきではありません。コンポーネントの有効期間中、制御入力要素と非制御入力要素のどちらを使用するかを決定します。*

以下は私のコードです:

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

ベストアンサー1

理由は、次のように定義したためです。

this.state = { fields: {} }

フィールドは空のオブジェクトとして扱われるため、最初のレンダリング時にthis.state.fields.nameは となりundefined、入力フィールドの値は次のように取得されます。

value={undefined}

そのため、入力フィールドは制御不能になります。

入力に任意の値を入力すると、fields状態は次のように変更されます。

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

そしてその時点で、入力フィールドは制御されたコンポーネントに変換されます。そのため、エラーが発生します。

コンポーネントは、テキスト タイプの制御されていない入力を制御対象に変更しています。

可能な解決策：

1- fieldsin 状態を次のように定義します。

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

2- または、値プロパティを次のように定義します。短絡評価このような：

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

おすすめ記事