Reactのinputタグに初期値を与える（トラブルシュートと設計の意図を推測する）
この記事にだいたい書いてあった
起こったこと
以下みたいに、inputタグに初期値を与えるようなJSXを書いてみた
code:jsx
<input type="text" value="John Doe" name="name" />
ブラウザで確認するとDevtoolsに以下のような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.
要約すると以下
ミュータブルなフィールドにするなら value じゃなくて defaultValue にしなさい
それかちゃんと onChange のハンドラをつけなさい
ミュータブルじゃなくていいならreadonlyにしなさい
なんでこうなるんだっけ、と思って色々見てみた
Reactのコードをたどる
ReactはJSXのタグとしてinputを宣言している
code:javascript
input:React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>,HTMLInputElement>;
タグで利用できる属性は HTMLInputElementで宣言されているAttributesを利用している
思想、意図を想像する
inputタグでvalueを設定したいときってどういうとき？
ユーザーが入力する項目に、初期値を入れておきたい場合
過去の入力内容を編集する場合など
例であればプレースホルダーを使うべき
この場合は変更が必ず発生する想定
disableにした上で現在の属性を表示させたい場合
変更が発生するなら項目自体にハンドラをつけるか、より上位のFormでハンドラをつけるはず
そうじゃないなら、readonlyであることを明確にすべき
ってことなのかなぁ