<option>
ブラウザ組み込みの <option>
コンポーネントを利用することで、<select>
ボックス内に選択肢をレンダーすることができます。
<select>
<option value="someOption">Some option</option>
<option value="otherOption">Other option</option>
</select>
リファレンス
<option>
ブラウザ組み込みの <option>
コンポーネント を利用することで、<select>
ボックス内にオプションをレンダーすることができます。
<select>
<option value="someOption">Some option</option>
<option value="otherOption">Other option</option>
</select>
props
<option>
は、一般的な要素の props をすべてサポートしています。
さらに、<option>
は以下の props をサポートしています:
disabled
: ブーリアン。true
の場合、オプションは選択できなくなり、薄暗く表示されます。label
: 文字列。オプションの意味を指定します。指定しない場合、オプション内のテキストが使用されます。value
: このオプションが選択された場合に、親の<select>
をフォームで送信する際に使用される値。
注意点
- React は
<option>
のselected
属性をサポートしていません。代わりに、このオプションのvalue
を親の<select defaultValue>
に渡して非制御のセレクトボックスを作成するか、<select value>
に渡して制御されたセレクトボックスを作成します。
使用法
選択肢を含むセレクトボックスを表示する
<option>
コンポーネントのリストを内部に含む <select>
をレンダーして、セレクトボックスを表示します。各 <option>
に、フォームで送信されるデータを表す value
を指定してください。
<select>
を <option>
コンポーネントのリストと共に表示する方法についての詳細は、こちらをご覧ください。
export default function FruitPicker() { return ( <label> Pick a fruit: <select name="selectedFruit"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> </select> </label> ); }
Error
Extra 185 of 186 byte(s) found at buffer[1]