【React初心者メモ】valueの使い方

value 属性は、フォーム要素（主に<input>, <select>, <textarea> など）に入力/選択されている現在の値を指定/管理するための属性です。HTMLやReactにおけるvalue属性は、各タグ（要素）ごとに異なる意味や用途を持っており、ややこしいのでまとめておきました。

<input>タグ

inputタグにおいてvalueは表示される値（=入力欄に表示されている内容）　です。
Reactでは、value={state} + onChangeを組み合わせることで、常に最新の入力値が表示されるようになります。

const [name, setName] = useState("");
<input value={name} onChange={(e) => setName(e.target.value)} />

valueがあることで、常にnameという状態に従ってinputの表示が変わります。

<select>タグと<option>タグ

selectタグとoptionタグにおいて、<select value="...">の値と<option value="...">の値が一致すると選択されます。Reactでは、value={state} + onChangeを組み合わせることで、valueに現在選ばれているoptionのvalue属性が代入され、選択しているoptionが表示されるようになります。

const [selectedFruit, setSelectedFruit] = useState("b");

return (
  <select value={selectedFruit} onChange={(e) => setSelectedFruit(e.target.value)}>
    <option value="a">Apple</option>
    <option value="b">Banana</option>
    <option value="c">Cherry</option>
  </select>
);
//selectedFruitが"b"なので、初期状態ではBananaが選択されます。
//ユーザーが別の選択肢を選ぶと onChangeが呼ばれ、stateが更新されることで、別の選択肢が選択されます。