React/html요소 관리
React와 Form
GROWNFRESH
2020. 6. 29. 17:02
1. React에서 제공하는 Form 이벤트
1) onChange
2) onInput (textarea, input 요소값이 변경될 때 사용됨 > react팀에서는 이 이벤트 사용을 추천하지 않음)
3) onSubmit
2. Form 속성
1) action : submit된 후 수행되는 조치 (특정 엔드포인트, 웹페이지로 이동 가능)
ex. <form action="/register"></form>
2) method : form 데이터를 제출할 때 사용할 HTTP 메소드 지정
ex. <form method="get or post">
3. 변경 가능한 속성 (interative properties)
1) value : input, textarea, select 태그에서 사용
2) checked : input태그의 checkbox, radio type
3) selected : select, option
4. preventDefault( )
: submit을 방지할 때 e.preventDefaul( ); 를 사용한다.
: React에서는 return false; 를 지원하지 않는다.
* 주의 *
* submit할 때는 type="submit"
: type="button"으로 하거나, onClick 이벤트로 submit을 처리하면
>> 엔터를 누르거나, 모바일웹서비스에서 키패드로 submit이 불가능하다.
다음은 React 공식 홈페이지의 Form 관련 설명이다.
https://ko.reactjs.org/docs/forms.html
참고사이트
1) React에서 제공하는 Form 이벤트 (전반적 설명)
2) Form 태그의 속성
3) onSubmit의 올바른 이용