※ 공식문서를 읽고 정리한 글입니다.

이벤트를 발생시키는 방법

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

• onClick, onSubmit등의 camelCase name의 html 이벤트 속성을 부여
• Js에서와 달리 addEventListener를 추가할 필요 없음
• 이벤트의 기본동작을 방지하고자 하는 경우 preventDefault()를 사용해야함

Class Component와 this

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    this.handleClick = this.handleClick.bind(this); //하지 않을시 undefined
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}> 
        /* equal to
        	onClick = {
          		this.setState(prevState => ({
            	isToggleOn: !prevState.isToggleOn
          		}));}
        */
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

• onClick에 바인딩한 handleClick은 단순히 함수 메서드 만을 참조하는 것 => 이벤트 발생시 this에 대한 명시가 없기 떄문에 handleClick 내부의 this는 undefined
• 따라서 bind를 통해 명시적으로 this를 할당해야함

class LoggingButton extends React.Component {
  handleClick = () => {
    console.log('this is:', this); //this가 제대로 바인딩 됨
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

• 클래스 필드를 활용하면 this 바인딩을 할 필요가 없어짐

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

• 콜백에 화살표 함수를 사용해 해결할수도 있지만 이 경우 실행시마다 다른 콜백함수가 불러와짐에 주의
  콜백이 props로 전달되면 컴포넌트가 렌더링을 다시해야하기 때문에 성능저하 발생

이벤트 핸들러에 인자 전달하기

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

• 이벤트 인자를 전달하고 싶을 경우 화살표 함수의 경우 인자를 명시적으로 전달해야함

출처:
https://reactjs.org/docs/handling-events.html