• React events are named hump style.
• When using JSX, you pass in a function as an event handler instead of a string.

Traditional HTML:

<button onclick="submit()"></button>
Copy the code

React:

<button onClick="{submit}"></button>
Copy the code

Presents:

<button (click) ="submit()"></button>
Copy the code

• In React, you cannot prevent default behavior by returning false. The preventDefault() method must be explicitly used.

Traditional HTML:

<a href="#" onclick="console.log('Hello'); return false"></a>
Copy the code

React:

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

  return (
    <a href="#" onClick={handleClick}>
      CLick me
    </a>
  );
}
Copy the code

E is a composite event. React defines composite events according to the W3C specification without worrying about cross-browser compatibility.

When React is used, you generally do not need to use addEventListener to add listeners to created DOM elements. Just add a listener during the initial rendering of the element.

When defining a class component, it is common to declare event handlers as methods in class:

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

    // This binding is necessary to make `this` work in the callback
    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>
    );
  }
}

ReactDOM.render(<Toggle />.document.getElementById("root"));
Copy the code

In JavaScript, the class method does not bind this by default. So when calling the this.handleClick callback in onClick, be sure to bind this.handleClick to this. Otherwise, the value of this will be undefined when the function is called.

If you do not add () to the end of the method, such as onClick={this.handleclick}, you should bind this to the method.

Add () and don’t bind this?

This binding can be a bit tricky. The first solution is to use the arrow function:

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

  render() {
    // This syntax ensures that 'this' in' handleClick 'is bound.
    return <button onClick={()= > this.handleClick()}>Click me</button>; }}Copy the code

The problem with this syntax is that a different callback is created each time LoggingButton is rendered. In most cases, this is fine, but if the callback function is passed as a prop to child components, they may do additional re-rendering. So don’t be lazy.

Pass parameters to the event handler

In a loop, we usually pass extra arguments to the event handler. For example, if id is the ID of the row you want to delete, you can pass arguments to the event handler in either of the following ways:

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

The two approaches are equivalent and are implemented using the arrow Function and function.prototype.bind respectively. First, the React event object e is passed as the second argument, and the event object must be explicitly passed via the arrow function. By using bind, the event object and more parameters will be passed implicitly.