ここでは、質問の側面と ReactJS コンテキストに焦点を当てた、いくつかのタイトル オプションを示します。 1. **React における制御された入力と制御されていない入力: 「状態の切り替え」警告を回避するにはどうすればよいですか?** 2. **Re

ReactJS の制御入力と非制御入力のエラー

React コンポーネントを使用する場合、制御入力と非制御入力の区別を理解することが重要です。デフォルトでは、入力は制御されていません。つまり、その値は DOM によって管理されます。ただし、入力に value 属性を設定すると、その入力は制御された入力になります。つまり、その値は React によって管理されます。

コンポーネントが最初に初期値を定義せずに制御されていない入力を制御されたものとしてレンダリングする場合、React はあなたが言及したような警告を発します:
「コンポーネントは、テキスト型の非制御入力を制御対象に変更しています。入力要素は非制御から制御に (またはその逆に) 切り替えるべきではありません。」

提供されたコード内:

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

この問題は、コンストラクターでフィールドが空のオブジェクトとして初期化されるために発生します:fields: {}。これは、最初は this.state.fields.name が未定義であることを意味します。その結果、入力フィールドは制御されなくなります。ただし、ユーザーが値を入力すると状態が更新され、入力が制御されたコンポーネントになります。この一貫性のない動作により、React 警告がトリガーされます。

考えられる解決策:

1. 初期デフォルト値を設定します: コンストラクター内のフィールドを次のように初期化します。名前のデフォルト値 (「name」: "" など)。これにより、入力フィールドが定義された値を持つ制御コンポーネントとして開始されることが保証されます。
2. 短絡評価を使用する: 入力の value 属性を次のように設定します: value={this.状態フィールド名 || ''}。 this.state.fields.name が定義されていない場合、これは空の文字列として評価され、デフォルト値が定義されていない場合でも入力フィールドが制御された状態で開始されることが保証されます。

以上がここでは、質問の側面と ReactJS コンテキストに焦点を当てた、いくつかのタイトル オプションを示します。 1. **React における制御された入力と制御されていない入力: 「状態の切り替え」警告を回避するにはどうすればよいですか?** 2. **Reの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。