ReactJS での「制御されていない入力から制御された入力への遷移エラー」を回避するにはどうすればよいですか?

ReactJS での制御されていない入力から制御された入力への遷移エラー

React は、制御されていない入力要素と制御されている入力要素の間の切り替えに対して警告します。このエラーは通常、入力フィールドが最初にユーザー入力を自由に (制御されていない) 受け入れ、その後開発者が状態 (制御) を通じてその値を制御しようとした場合に発生します。

コード スニペット:

エラーは次のコードで示されています:

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

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 *"
      />
    </div>
  )
}</code>

根本原因:

このコードでは、問題はフィールドが次のような初期状態にあります。空のオブジェクトとして初期化されます。コンポーネントが最初にレンダリングされるとき、this.state.fields.name は未定義であるため、入力は制御されないコンポーネントになります。ただし、ユーザーが値を入力するとフィールドが更新され、入力が制御されます。

考えられる解決策:

このエラーを解決するには、次の 2 つのオプションがあります。

1. デフォルト値でフィールドを初期化します:

   デフォルト値で初期状態のフィールドを定義します:

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

2. 短絡評価を使用する:

   this.state.fields.name が未定義の場合、value 属性で短絡評価を使用してデフォルト値を提供します:

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

以上がReactJS での「制御されていない入力から制御された入力への遷移エラー」を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。