프로젝트/팀프로젝트

input checkbox오류

백단비 2023. 6. 30. 15:51

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