티스토리 뷰

 

    <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 는 선택 안되게 막아주려고 넣음

https://ko.reactjs.org/docs/forms.html

'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
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함