React/ReactJS: Handling Events

There was once a habit of registering event handlers as HTML attributes as shown below.

<input type="radio" value="trillium" onclick="checkFlower()"
	name="flower"/> Trillium<br/>

Great White Trillium by Bernard B. ILarde. CC BY-SA 3.0

Once the click event occurs, the onclick event handler calls the checkFlower() function defined somewhere inside the <script> element.

function checkflower(){
	// do something
}

This practice is not recommended anymore, unless, of course, you are working on an archaic IE8/Opera 6 compatible web application which do not support the addEventListener() method.

But in JSX, using inline event handlers happen to be a norm. Just that events in JSX are written in camelCase, like onClick, onChange, onMouseOver, onPointerDown, etc.

The above HTML tag with an event handler can be rewritten in JSX as:

<input type="radio" value="trillium" onClick={(e) => this.checkFlower(e)}
	name="flower"/> Trillium<br/>

Now since any method defined inside an ES6 class inherits bind() from the Function prototype, we can also write it as:

<input type="radio" value="trillium" onClick={this.checkFlower.bind(this)}
	name="flower"/> Trillium<br/>

The checkFlower() function is defined somewhere inside the component, and is known as a callback function (generally just "callback"), and e is the synthetic event.

checkFlower(e) {
  console.log('flower: ', e.target.value);
}

But again, such practice of binding in property or render is not encouraged because everytime the component renders, it creates a new function.

Binding of the callback function should be done in the constructor (ES6). Notice that bind() is not used inside the JSX anymore.

class Flower extends React.Component {
	constructor(props) {
    	super(props);
    	this.checkFlower = this.checkFlower.bind(this);
	}
	checkFlower(e) {
  		console.log('flower: ', e.target.value);
	}
  	render() {
	    return (
	    	<label>
	    		<input type="radio" value="trillium"
	    			onClick={this.checkFlower} name="flower"/>
	    			Trillium
	    	</label>
		);
  	}
}

Now there is another way where we can do away with the mandatory bindings either inside the constructor or the JSX and do it in the method definition itself.

checkFlower = (e) => {
	console.log('flower: ', e.target.value);
}

The syntax is elegant, but is still experimental (not-standardized).

<input type="radio" value="trillium"
	onClick={this.checkFlower.bind(this, '3')}
	name="flower"/> Trillium<br/>

constructor(props) {
	super(props);
	this.checkFlower = this.checkFlower.bind(this, '3');
}

checkFlower(petals, e) {
  console.log("petals: ", petals, ', flower: ', e.target.value);
}