EVENT
: 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것
e.g. onmouseover, onclick
이벤트를 사용할 때 주의사항
1. 카멜 표기법으로 작성
2. 이벤트에 실행할 자바스크립트 코드가 아니라, 함수 형태의 값을 전달
3. div, button, input, form, span 같은 DOM 요소에만 이벤트를 설정할 수 있음
SyntheticEvent : 웹 브라우저의 이벤트를 감싸는 객체, 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없음
e.persist()나 e.target.value를 통해 참조할 수 있음.
state에 input 값 담기
<input ....
value = {this.state.Message}
onChange = {
(e) => {
this.setState({
message: e.target.value}=
})
}
}
/>
임시 메서드 사용
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({
message: e.target.value
});
}
Property Initializer Syntax를 사용한 메서드 작성
handleChange = (e) => {
this.setState({
message: e.target.value
});
}
input 여러 개 다루기 - event 객체 사용
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
//객체 안에서 key를 [ ] 로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됨
onKeyPress 이벤트 핸들링
handleKeyPress = (e) => {
if(e.key === 'Enter') {
this.handleClick();
}
}
....
<input
...
onKeyPress = {this.handleKeyPress}>