티스토리 뷰
Study/react.js
[warning]Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
빛장 2020. 1. 27. 16:02
<select
onChange={handleChange}
name="selectBox"
aria-label="옵션선택"
style={{
border: "1px solid #eee",
width: "100%",
height: "50px",
color: "#ccc",
marginBottom: "15px",
padding: "16px"
}}
>
<option selected disabled style={{ color: "#ccc" }}>
---옵션선택---
</option>
{(optionValue || []).map((options, idx) => (
<option key={idx} value={options} style={{ color: "#000" }}>
{options}
</option>
))}
</select>
위와같이 selected 를 사용했을시 나타나는 경고이다.
react에서는 selected 를 사용하는 대신 최상위 select 에 defaultValue 를 지정하여
그놈을 맨처음 보이게 할 수 있다.
<select
defaultValue="default"
onChange={handleChange}
name="selectBox"
aria-label="옵션선택"
style={{
border: "1px solid #eee",
width: "100%",
height: "50px",
color: "#ccc",
marginBottom: "15px",
padding: "16px"
}}
>
<option value="default" disabled style={{ color: "#ccc" }}>
---옵션선택---
</option>
{(optionValue || []).map((options, idx) => (
<option key={idx} value={options} style={{ color: "#000" }}>
{options}
</option>
))}
</select>
요런식으로. disabled 는 선택 안되게 막아주려고 넣음
'Study > react.js' 카테고리의 다른 글
[react]조건부 렌더링 (0) | 2020.01.30 |
---|---|
[context API]기본 (0) | 2020.01.28 |
[노드패키지매니져]npm 과 npx 의 차이점 (0) | 2020.01.27 |
[react]useRef 사용 (0) | 2020.01.14 |
[react] 여러개의 인풋 관리 (0) | 2020.01.14 |
댓글