Button에 Onclick사용

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

[검색폼 2] 폼 초기화(풀이)

작성

152

{this.state.searchKeyword.length > 0 && (<button type="reset" className="btn-reset" onClick={event => this.handleOnclick(event)}></button>)}

button에다가 onClick이벤트를 줘서 리셋시켜도 상관없을까요 ??
form에다가 함수 사용하는거랑 button에서 onClick이랑 차이점이 있을까요??

react mvc

답변 1

김정환

지식공유자

폼의 reset 이벤트를 처리하는 대신 리셋 버튼의 click 이벤트를 처리해도 동작합니다. 폼에는 submit 이벤트도 있는데요. 이것도 제출 버튼의 click 이벤트를 처리하는 방식으로 구현할 수 있습니다.

둘 간에는 차이가 있는데요. 폼의 submit 이벤트는 제출 버튼을 클릭할 때 뿐만 아니라 폼 안의 인풋 필드에서 엔터를 입력했을 때도 발생합니다. 마우스 클릭 뿐만 아니라 키보드 엔터에서도 폼 제출을 처리하기 위해 form의 이벤트를 사용했는데요. reset 이벤트도 submit과 비슷하게 사용한 것이라고 보시면 됩니다.

ming9

질문자

감사합니다 🙂 유익한 영상 잘보고 있습니다!!

김정환

지식공유자

고맙습니다. 더 열심히 할게요.

궁금한게 있으면 언제든 질문해 주세요.

인프런 커뮤니티 질문&답변

Button에 Onclick사용