3.8. React event handling

React element event handling and DOM elements are similar. But there is one grammatical difference:

React event binding properties are named in hump style rather than lowercase.
If you use the syntax of JSX, you need to pass in a function as an event handler instead of a string (DOM element)

HTML is usually written as follows:

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

React written in Chinese is as follows:

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

In React the other difference is that you can’t use return false to prevent the default behavior, you must explicitly use the preventDefault .

For example, we usually block links from opening a new page by default in HTML, which can be written as follows:

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

In React is written as follows:

functionActionLink(){functionhandleClick(e){e.preventDefault();console.log('click the link');}return(<ahref="#"onClick={handleClick}>
Click me </a>);}

In the instance e is a synthetic event.

Use React usually you don’t need to use addEventListener add a listener to a created DOM element. You only need to provide a listener when the element is initially rendered.

When you use ES6 class syntax to define a component, the event handler becomes a method of the class. For example, the following Toggle component renders a button that allows the user to toggle the switch state:

3.8.1. Example ¶

classToggleextendsReact.Component{constructor(props){super(props);this.state={isToggleOn:true};//Binding here is necessary, so
\`this\`
Can only be used in callback functions. this.handleClick=this.handleClick.bind(this);}handleClick(){this.setState(prevState=>({isToggleOn:
!prevState.isToggleOn}));}render(){return(<buttononClick={this.handleClick}>{this.state.isToggleOn?'ON':'OFF'}</button>);}}ReactDOM.render(<Toggle/>,document.getElementById('example'));

You have to be careful with the JSX callback function this the method of the class is not bound by default this of. If you forget to bind this.handleClick and pass it in. onClick when you call this function this the value will be undefined .

This is not a special behavior of React; it is part of how the function runs in JavaScript. Usually, if you don’t add to the method () , for example onClick={this.handleClick} you should bind for this method this .

If you use the bind it bothers you. There are two ways to solve it. If you are using the experimental property initializer syntax, you can use the property initializer to bind the callback function correctly:

classLoggingButtonextendsReact.Component{//This grammar ensures that \`this\`
Bind to handleClick
in//This is just a test handleClick=()=>{console.log('this
is:',this);}render(){return(<buttononClick={this.handleClick}>Clickme</button>);}}

If you don’t use the property initializer syntax, you can use the arrow function in the callback function:

classLoggingButtonextendsReact.Component{handleClick(){console.log('this
is:',this);}render(){//This grammar ensures that \`this\` Bind to handleClick
in return(<buttononClick={(e)=>this.handleClick(e)}>Clickme</button>);}}

The problem with using this syntax is that every time LoggingButton a different callback function is created when rendering. In most cases, this is fine. However, if this callback function is passed into lower-level components as an attribute value, those components may be re-rendered additionally. We usually recommend binding in the constructor or using attribute initializer syntax to avoid such performance problems.

Pass parameters to the event handler ¶

Usually we pass additional parameters to the event handler. For example, if id it was you who wanted to delete that line. id can pass parameters 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>

The above two methods are equivalent. In the above two examples, the parameters e as React the event object will be passed as the second parameter. Through the arrow function, the event object must be explicitly passed, but through the bind event objects and more parameters will be passed implicitly.

It is worth noting that through bind method to pass parameters to the listener function, the listener function defined in the class component, and the event object e should be arranged after the passed parameter, for example:

classPopperextendsReact.Component{constructor(){super();this.state={name:'Hello
world!'};}preventPop(name,e){//Event object e should be placed last e.preventDefault();alert(name);}render(){return(<div>
<p>hello</p>{/\*pass through bind()
Method passes parameters.\*/}<ahref="https://reactjs.org"onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</div>);}}