이벤트 핸들러를 정의해서 사용자 조작에 대응할 수 있는 React 엘리먼트를 만드는 방법을 살펴보자. JSX로 작성한 엘리먼트에 속성 값으로 이벤트 핸들러(함수 정의)를 정의한다(JSX를 사용하지 않고 createElement()를 이용해서 일반적인 자바스크립트로 작성한 경우에는 속성으로 넘겨줄 수 있다). 속성으로 사용하는 이벤트 이름은 표준 W3C DOM 이벤트를 onClick, onMouserOver처럼 카멜 표기법으로 작성한다.

onClick={function() {...}}

 

또는

onClick={() => {...}}

 

다음 예제 코드는 React에서 사용자가 버튼을 클릭했을 때 실행할 이벤트 리스너를 정의하고 있다. 이벤트 리스너에서 this를 콘솔에 표시하도록 했다. 여기서 event 객체는 내장 DOM 이벤트 객체를 개선한 것으로, 합성 이벤트(SyntheticEvent)라고 부른다.

<button onClick={(function(event) {
      console.log(this, event)
  }).bind(this)}>
  Save
</button>