Input type=checkbox에서 갑자기 오류가 뜬다. 작동은 잘 되긴 하는데...
provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
onChange핸들러 없이 prop양식에 넣었다니...
input은 그냥 창을 띄우기위한 버튼이라 없는 셈치고 label에 onClick을 해줬는데
<label onClick={() => setOpenForm(true)}>
+
</label>
그걸 onChange로 바꿔줬는데 변화 없이 오류가 뜨고 input이 Check가 되지 않는다.
<label onChange={() => setOpenForm(true)}>
+
</label>
이렇게 하라는게 아닌가....
그래서 다시 OnClick으로 바꿔 놓고 input에 checked대신 defaultChecked를 넣으래서 아래 코드의
<input
type="checkbox"
id="challenge_form"
checked={openForm}
className="modal-toggle"
/>
에서 Checked를 변경해 줌
<input
type="checkbox"
id="challenge_form"
defaultChecked={openForm}
className="modal-toggle"
/>
응.. 그래도 변화 없죠..
그래서 다시 원상복귀 시킨 후 input태그 안에 readonly를 적어주니
오류가 사라짐!!
<input
type="checkbox"
id="challenge_form"
checked={openForm}
className="modal-toggle"
readOnly
/>
다음부터는 바로 readonly처리해야겠다.
320x100
'프로젝트 > 팀프로젝트' 카테고리의 다른 글
5~6주차 회고 (0) | 2023.07.07 |
---|---|
React Query (0) | 2023.07.06 |
backend server와 연결 (0) | 2023.06.29 |
팀 프로젝트 4주차 회고 (0) | 2023.06.27 |
input type file (0) | 2023.06.20 |