React와 Form

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 이벤트 (전반적 설명)

medium.com/@psm88732/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B5%90%EA%B3%BC%EC%84%9C-7%EC%9E%A5-react-%EC%97%90%EC%84%9C-%ED%8F%BC-%EB%8B%A4%EB%A3%A8%EA%B8%B0-e68862dbf8ec

 

2) Form 태그의 속성

m.blog.naver.com/PostView.nhn?blogId=qbxlvnf11&logNo=220904680449&proxyReferer=https:%2F%2Fwww.google.com%2F

 

3) onSubmit의 올바른 이용

cions.tistory.com/entry/Form%ED%83%9C%EA%B7%B8-onsubmit%EC%9D%98-%EC%98%AC%EB%B0%94%EB%A5%B8-%EC%82%AC%EC%9A%A9