Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. [Reactのエラー]

「Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.」

(警告：失敗したpropタイプ： onChangeハンドラなしでフォームフィールドにvalueプロパティを提供しました。 これにより、読み取り専用フィールドがレンダリングされます。 フィールドを変更可能にする場合は「defaultValue」を使用します。 それ以外の場合は「onChange」または「readOnly」のいずれかを設定します。)

このエラーの解決方法

inputタグをonChangeのイベントなしで使用するには「defaultValue」を使いなさいという事です。onChange={this.handleChange.bind(this)}で状態を保存すると編集のキャンセルが効かないので「defaultValue」はそれなりに使用頻度はあると思います。

<form onSubmit={this.handleUpdate.bind(this)}>
  <input type="text" defaultValue={this.state.name} name="txt_name" />
</form>

そして、そのinputタグの値を取るには次のようにFormDataを利用します。

handleUpdate(event){
  const form_data = new FormData(event.target);
  const txt_name = form_data.get('txt_name');
}

ただ、IEはFormDataオブジェクトに対応していないので「formdata-polyfill」を使用して下さい。

// インストールのコマンド
yarn add formdata-polyfill

// Reactのjsxファイルに追加する
import 'formdata-polyfill'

• Twitter
• Facebook
• はてブ

• Pocket
• LINE

関連記事