Just like HTML, React can perform actions based on user events. React has the same events as HTML: click, change, mouseover etc.

A good practice is to put the event handler as a method in the component class:

class Profile extends React.Component {
  changeName() {
    alert("name changed!");
  }
  render() {
    return (
      <button onClick={this.changeName}>change your name!</button>
    );
  }
}

ReactDOM.render(<Profile />, document.getElementById('root'));

Bind this

For methods in React, the this keyword should represent the component that owns the method. That is why you should use arrow functions. With arrow functions, this will always represent the object that defined the arrow function.

class Profile extends React.Component {
  changeName = () => {
    alert(this);
    /*
    The 'this' keyword refers to the component object
    */
  }
  render() {
    return (
      <button onClick={this.changeName}>change your name!</button>
    );
  }
}

ReactDOM.render(<Profile />, document.getElementById('root'));

Why use arrow function?

In class components, the this keyword is not defined by default, so with regular functions the this keyword represents the object that called the method, which can be the global window object, a HTML button, or whatever.

Read more about binding this in our React ES6 ‘What About this?’ chapter.

If you must use regular functions instead of arrow functions you have to bind this to the component instance using the bind() method:

Passing parameters

If you want to send parameters into an event handler, you have two options:
Make an anonymous arrow function

class Profile extends React.Component {
  changeName = (a) => {
    alert(a);
  }
  render() {
    return (
      <button onClick={() => this.changeName("Goal")}>Change your name!</button>
    );
  }
}

ReactDOM.render(<Profile />, document.getElementById('root'));

Bind the event handler to this. Note that the first argument has to be this.

class Profile extends React.Component {
  changeName(a) {
    alert(a);
  }
  render() {
    return (
      <button onClick={this.changeName.bind(this, "Lau")}>change your name!</button>
    );
  }
}

ReactDOM.render(<Profile />, document.getElementById('root'));

Note: If you send arguments without using the bind method, (this.shoot(this, "Goal") instead of this.shoot.bind(this, "Goal")), the shoot function will be executed when the page is loaded instead of waiting for the button to be clicked.

It is generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

Arrow Function onClick

Remember that props are evaluated before they’re passed down. When written without the arrow function, a link or button would be called when ui renders, instead of when the link is clicked. That’s not what we want. Wrapping it in an arrow function delays execution until the user clicks the link.