리액트
4장 이벤트 핸들링
KairoYang
2020. 4. 7. 11:16
사용자가 웹 브라우저에서 dom 요소들과 상호 작용하는 것을 이벤트라고 한다.
이벤트 이름은 카멜 표기법으로 작성한다. (onClick,onKeyup)
이벤트에 실행할 js코드를 전달하는 것이 아니라 함수 형태의 값을 전달한다.- 함수형태의 객체를 전달
dom 요소에만 이벤트를 설정할 수 있다. div,button,input,form,span 요소에는 이벤트 가능,직접 만든 컴포넌트에서는 불가능, <Mycomponent onClick={dosomething}/> 이름이 onClick인 propsfmf Mycomponent에게 전달.
handleChange = e =>{this.setState({ [e.target.name] : e.target.value}); }; - 객체안에서 key를 []로 감싸면 그안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.
e.target.name을 활요앟면 useState를 쓸 때 인풋값이 들어있는 form객체러르 사용하면 된다.