本記事では、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.のエラーが出力された時の原因と対処法について解説しています。
Reactの学習におすすめ参考書
モダンJavaScriptの基本から始める React実践の教科書
| 著者 | 岡田 拓巳 |
|---|---|
| 発売日 | 2021/9/17 |
| ページ数 | 272ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (152件) |
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
原因
まず始めにこのエラーが出力される原因は、フォームの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属性に初期値を設定しつつユーザーからのアクションがあった時はその変更を取得し更新(再レンダリング)することが出来ます。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
