• React의 이벤트는 camelCase를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

다음은 일반적인 HTML

<button onclick="activateLasers()">
	Activated Lasers
</button>

React에서는 다음과 같이 표현한다.

<button onClick={activateLasers}>
	Activated Lasers
</button>

또 다른 차이점으로, React에서는 false를 반환해도 기본동작을 막지 않는다. 반드시 preventDefault를 사용해야 한다.

• HTML

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

• React

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

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

여기서 e는 합성이벤트를 의미하고 W3C 명세에 따라 정의하기 때문에 브라우저 호환성은 괜찮지만, 정확히 동일하게 동작하지는 않는다.

이벤트 제공은 addEventListener를 사용하지 않고 렌더링 될 때 리스너를 제공하면 된다. 예를 들어 class를 통해 컴포넌트를 정의하는 경우에는 클래스의 메소드로 제공할 수 있다.

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

    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    this.handleClick = this.handleClick.bind(this);
  }

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

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

onClick에 직접 handleClick메소드를 넣을 때, bind()를 통해 this를 바인딩 해줘야 한다.

바인딩을 직접하는 것 말고 두가지 방법이 있다.

• 퍼블릭 클래스 필드 문법을 활용한 방법 (실험적)

class LoggingButton extends React.Component {
  // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
  // 주의: 이 문법은 *실험적인* 문법입니다.
  handleClick = () => {
    console.log('this is:', this);
  };

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

• 콜백에 화살표 함수 사용

class LoggingButton extends React.Component {
  // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
  // 주의: 이 문법은 *실험적인* 문법입니다.
  handleClick() {
    console.log('this is:', this);
  };

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