4. Event

이벤트
- 웹 브라우저와 DOM 요소간의 상호 작용
- camelCase로 이벤트 명 작성
- 함수 형태 값 전달
- DOM 요소에만 설정
- 컴포넌트 자체 이벤트 설정은 불가하지만 props를 이용한 설정은 가능
Ex)

<div onClick={this.props.onClick}>{}</div>

<input onChange={

(e)=>{
console.log('onChange');
console.log(e.target.value);//변경되고 있는 값
}
}/>

state = {
message: ''
}

<input type="text" name="message" placeholder="input" value=this.state.message

onChange={
(e)=>{
this.setState({
message:e.target.value
}
)
}
}>

</input>

 

이벤트 기본 방식

state={
message:''
}
constructor(props){
supter(props);
this.hadleChange=this.hadleChange.bind(this);
this.hadleClick=this.hadleClick.bind(this);
}

hadleChange(e){
this.setState({
message:e.target.value
}
)
}

hadleClick(){
this.setState({
message:''
}
)
}

 

<input value={this.staet.message} onChange={this.hadleChange}/>

<button onClick={this.hadleClick}/>

 

Propperty Initialize Syntax
- constructor 수정 할 필요가 없다
- 이벤트 기본 방식 코드 중 아래와 같이 수정하여 사용하면 된다
- constructor는 제외
hadleChange = (e) => {
this.setState({
message:e.target.value
}
)
}

hadleClick = () => {
this.setState({
message:''
}
)
}

이벤트가 여러개 일경우
state = {
A:'',
B:''
}

hadleChange=(e)=>{
this.setState({
[e.target.name]:e.target.value
}
)
}

hadleClick=()=>{
this.setState({
A:'',B:''
}
)
}

hadleKeyPress=(e)=>{
if(e.key==='Enter'){
this.hadleClick();
}
}

 

<input name="A" vlaue={this.state.message} onChange={this.hadleChange} onClick={this.hadleClick} onKeyPress={this.hadleKeyPress/>

<input name="B" vlaue={this.state.message} onChange={this.hadleChange} onClick={this.hadleClick} onKeyPress={this.hadleKeyPress/>