ReactJS アプリで「コンポーネントが制御されていないテキスト型の入力を制御対象に変更しています」という警告が表示されるのはなぜですか?

制御されていない入力要素と制御されている入力要素: ReactJS のガイド 警告

ReactJS では、入力要素の制御状態の一貫性を維持することを推奨しています。特定のシナリオでは、「コンポーネントがテキスト型の制御されていない入力を制御対象に変更しています。」という警告が表示されることがあります。原因を詳しく調べて、効果的な解決策を探ってみましょう。

問題の根本

ReactJS では、入力要素を制御することも、制御しないこともできます。制御された入力はコンポーネントの状態によって値が管理される入力であり、制御されていない入力ではユーザーがその値を直接変更できます。この問題は、最初に制御されていないと宣言された入力が、後で制御された入力に移行されるときに発生します。

次のコードを考えてみましょう。

<br>class MyComponent extends React.Component {<br>constructor(props) {</p>
<pre class="brush:php;toolbar:false">super(props);
this.state = {
  fields: {}
}

}

onChange(field, e){

let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({fields});

}

render() {

return(
  <div>
    <input
      value={this.state.fields["name"]}
      onChange={this.onChange.bind(this, "name")}
      type="text"
      placeholder="Name *"
    />
  </div>
)

}
}

この例では、値が最初は未定義であるため、'name' 入力は制御されません (this.state.フィールド["名前"])、ユーザーが自由に変更できるようにします。ただし、ユーザーが値を入力すると、onChange ハンドラーによって this.state.fields.name が設定され、入力が制御された状態に効果的に移行します。この状態の変化により、警告がトリガーされます。

問題への対処

警告を解決するには、次のいずれかを実行できます。

1. 状態の初期フィールドを定義します: 各フィールドに空の文字列を使用して this.state.fields を宣言します。これにより、すべての入力が最初に制御されることが保証されます。

   <code class="python">class MyComponent extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
      fields: {
        name: '',
      }
    }
     }
   
     // ...
   }</code>

2. 短絡評価を使用する: 短絡評価を使用して値プロパティを割り当てます。これにより、未定義が保証されます。値は空の文字列として評価されます。

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

いずれかの解決策を実装することで、エラーを排除し、入力の制御状態の一貫性を確保できます。

以上がReactJS アプリで「コンポーネントが制御されていないテキスト型の入力を制御対象に変更しています」という警告が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。