e.target
<input name ="name" plcaeholder = "이름" value = "홍길동님">
e.target.value
홍길동님
이상, input의 이벤트에 대한 설명이다.
웹브라우저 상에 버튼 클릭, 값 입력 등의 거의 대부분의 일들은 이벤트 이다.
OnClick 을 어트리뷰트로 갖고있다면, 클릭 행위의 이벤트를 포함한다고 볼 수 있다.
대표적인 것으로 Input이 있다.
React에서는
<input /> 을 제공하는데, input의 어트리뷰트로 onClick을 제공한다.
<input onClick = {클릭 이벤트가 발생하면 실행할 일(함수)} >
클릭 이벤트 발생시, 실행하고 싶은 일을 함수로 정의해준다.(사용자가 할일)
<내가 정의한 함수>
handleChange= (e ) =>{ //e는 이벤트 객체를 의미한다.
this.setState({
[e.target.phone] : e.target.value // e.target은 <input />을 의미한다. console.log를 찍어보면 더욱 명확하다.
// e.target.value 는 <input /> 안에 들어있는 value값을 의미한다.
}
);
e : 이벤트 (클릭, 값입력)
e.target : <input name="phone" placeholder ="전화번호" ~~ :내가 정의한 input 태그
e.target.value : input 정의해놓은 것에서 value의 값
