React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 몇 가지 문법의 차이는 다음과 같다.

• React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

예를 들어, HTML은 다음과 같다.

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

React에서는 약간 다르다.

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

또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명식적으로 호출해야 한다. 예를 들어, 일반 HTML에서는 새 페이지를 여는 링크의 기본 동작을 방지하기 위해 다음과 같은 코드를 작성한다.

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

React에서는 다음과 같이 작성할 수 있다.

function ActionLink() {
  ***function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }***

  return (
    ***<a href="#" onClick={handleClick}>***
      Click me
    </a>
  );
}

여기서 e는 합성 이벤트이다. React는 W3C 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없다. React 이벤트는 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않는다. 더 자세한 사항은 합성 이벤트를 참고하면 된다.

React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 된다.

ES6 클래스를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것이다. 예를 들어, 다음 Toggle 컴포넌트는 사용자가 "ON"과 "OFF" 상태를 토글 할 수 있는 버튼을 렌더링 한다.