ch03.onChange 이벤트 설정

OnChange 이벤트 설정

• EventPractice 컴포넌트에 input요소를 렌더링 하는 코드와 해당 요소에 onChange 이벤트를 설정

• import React, { Component } from "react";
  //클래스형 컴포넌트 생성
  class EventPractice extends Component {
    render() {
      return (
        <div>
          <h1>이벤트 연습</h1>
          <input
            type="text"
            name="message"
            placeholder="아무거나 입력해 주세요"
            onChange={(e) => {
              console.log(e);
              //해당 콘솔에 이벤트를 출력(e= SyntheticEvent로 웹브라우저의 네이티브 이벤트를 감싸는 객체(네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML이벤트를 다룰떄와 똑같이 사용))
              //SyntheticEvent는 네이티브 이벤트와 달리 이벤트가끝나고 나면 이벤트가 초기화 되어 정보를 참조할수 없다.
              //ex)0.5초뒤에 더이상 e객체 참조 불가능->비동기적으로 객체참조 하고 싶을 경우 e.persist() 함수를 호출해야 한다.
              console.log(e.target.value);//바뀌는 값을 콘솔에 출력
            }}
          />
        </div>
      );
    }
  }
  export default EventPractice;

• 

  e객체는 SyntheticEvent로 웹브라우저의 네이티브 이벤트를 감싸는 객체이고 이것이 콘솔에 찍힌다.
• SyntheticEvent는 이벤트가 끝나고 나면 이벤트가 초기화 되어 정보를 참조 불가능
• 만약 비동기적으로 이벤트 객체를 참조하고 싶다면 e.persist()함수를 호출해야된다.

State에 Input값 담기

• 생성자 메서드인 constructor에서 state 초깃값을 설정하고, 이벤트 핸들링 함수 내부에서 this.setState메소드를 호출하여 state를 업데이트
• input의 value값을 state에 있는 값으로 설정

• import React, { Component } from "react";
  //클래스형 컴포넌트 생성
  
  class EventPractice extends Component {
    state = {
      message: "",
    };
    render() {
      return (
        <div>
          <h1>이벤트 연습</h1>
          <input
            type="text"
            name="message"
            placeholder="아무거나 입력해 주세요"
            value={this.state.message}
            onChange={
              //이벤트 핸들링 함수 내부에서 this.setState메소드를 호출하여 state업데이트
              (e) => {
                this.setState({
                  message: e.target.value,
                });
              }
            }
          />
        </div>
      );
    }
  }
  export default EventPractice;

버튼을 누를 때 Comment값을 공백으로 설정

• input요소 코드 아래쪽에 버튼을 하나 만들고 클릭 이벤트가 발생하게 되면 현재 comment값을 메시지 박스로 띄운후 comment값을 공백으로 설정

• import React, { Component } from "react";
  //클래스형 컴포넌트 생성
  
  class EventPractice extends Component {
    state = {
      message: "",
    };
    render() {
      return (
        <div>
          <h1>이벤트 연습</h1>
          <input
            type="text"
            name="message"
            placeholder="아무거나 입력해 주세요"
            value={this.state.message}
            onChange={
              //이벤트 핸들링 함수 내부에서 this.setState메소드를 호출하여 state업데이트
              (e) => {
                this.setState({
                  message: e.target.value,
                });
              }
            }
          />
          <button
            onClick={() => {
              //버튼 클릭시 현재 commnet값을 출력후 comment 공백으로 설정
              alert(this.state.message);
              this.setState({
                message: "",
              });
            }}
          >
            확인
          </button>
        </div>
      );
    }
  }
  export default EventPractice;

•