브라우저에 내장된 <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 box의 경우 상위<select defaultValue>
에 전달하거나, 제어되는 select box의 경우<select value>
에 전달하세요.
사용법
옵션이 포함된 select box 표시하기
내부에 <option>
컴포넌트 목록이 있는 <select>
를 렌더링하여 select box를 보여줍니다. 각 <option>
에 양식과 함께 제출할 데이터를 나타내는 value
를 지정하세요.
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]