ReactJS の「制御されていない入力変換から制御された入力への変換」警告を修正するにはどうすればよいですか?

ReactJS での非制御から制御への入力変換警告の処理

ReactJS は、コンポーネントが制御されていない入力要素を制御された入力要素に遷移するときに開発者に警告します。このエラーは、次のメッセージに関連付けられています:

警告: コンポーネントは、テキスト タイプの制御されていない入力を制御対象に変更しています。入力要素は、非制御から制御に (またはその逆に) 切り替えてはなりません。コンポーネントの存続期間中、制御された入力要素を使用するか制御されない入力要素を使用するかを決定します。

原因を理解する

このエラーは、コンポーネントの状態が入力フィールドを制御されていない (つまり、制御された値のプロパティがない) として初期化したが、後でその値を設定し、事実上制御された入力に移行した場合に発生します。

コード例

次のコード スニペットを考えてみましょう:

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

...

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")}
        type="text"
        refs="name"
        placeholder="Name *"
      />
    </div>
  )
}</code>

この例では、状態は最初は空のオブジェクトであり、入力フィールドは制御されません。ただし、フィールド値が設定されると、入力が制御され、警告が表示されます。

考えられる解決策

この問題を解決するには、次の解決策を検討してください。

1. 状態のフィールド値を初期化: プレースホルダー値を使用して初期状態の入力フィールドを定義します。例:

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

2. 短絡評価を使用: 未定義の値を処理するために短絡評価を使用して値プロパティを設定します。例:

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

これらのソリューションを実装すると、入力要素が一貫した状態に保たれ、制御されていない入力から制御された入力への変換エラーを回避できます。

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