本記事では、ReactでWarning: 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.のエラーが出力された時の原因と対処法について解説しています。
- JavaScriptの基礎から始めてReactの機能を一通り学べる
- 実務で必要となる知識を意識しながら学習を進められる
- 現場のシチュエーションベースのストーリーで技術解説
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
原因
まず始めにこのエラーが出力される原因は、フォームのvalue属性に対して固定の値を設定しているからです。
固定値を設定してしまうと、ユーザーが文字を入力したりプルダウンを変更したりとアクションを起こすことが出来なくなってしまうことをReactはエラーで教えてくれています。
例えば、下記のコードはテキストフォームに初期値として「サンプル」という文字列を設定しています。
function App() {
return <input value="サンプル" />;
}
export default App;これをブラウザで表示させると、テキストフォームに初期値のサンプルがセットされている状態になりますが、サンプルの後に文字を追加したり削除することは出来ません。
では、このエラーを修正するにはどのようにすれば良いか？詳しく見ていきましょう。
対処法
エラーを無くす方法は2つあります。
1つ目は初期値を設定したい場合はvalue属性ではなくdefaultValue属性に値を設定する方法です。先ほどのサンプルコードを書き換えてみましょう。
function App() {
return <input defaultValue="サンプル" />;
}
export default App;このようにコードを書き換えることで、初期値を設定しつつユーザーからのアクションも問題なく受け付けるように出来ます。
2つ目はonChangeイベントでユーザーからのアクションを検知し正しい値をvalue属性に設定する方法です。先ほどのサンプルコードを書き換えてみましょう。
import { useState } from "react";
function App() {
const [val, setVal] = useState("サンプル");
return <input value={val} onChange={(e) => setVal(e.target.value)} />;
}
export default App;このようにコードを書き換えることで、value属性に初期値を設定しつつユーザーからのアクションがあった時はその変更を取得し更新(再レンダリング)することが出来ます。
