ReactJS Events
The way of handling the event is very much similar, to the way an event is handled in JavaScript. The major difference is that we pass a function as the event handler, rather than a string in JSX, and camel casing is used for naming the events in place of regular function names written in small alphabets.
Another minor difference exists in the syntax,
<button onClick={this.doSomething()}> Do Something </button>
is written as
<button onClick={this.doSomething}> Do Something </button>
class Mybutton extends React.Component { constructor(props) { super(props); this.state={ message:"Default message" }; // This binding is necessary to make `this` work in the callback this.doSomething=this.doSomething.bind(this); } doSomething() { this.setState({ message:"updated message" }); } render() { return <div><button class="myButton" onClick={this.doSomething}> Do Something</button><hr/> <label>{this.state.message}</label></div>; } } ReactDOM.render(<Mybutton />,document.getElementById('root'));
<a href="#" onclick="console.log('Test link is clicked'); return false"> test link </a>
We can write the following code to prevent default link behaviour of opening a new page, such as
function preventLink() { function handleClick(event) { event.preventDefault(); console.log('Test link was clicked.'); } return ( <a href="#" onClick={handleClick}> Test Link </a> ); }
Passing arguments to the event handlers
Some event handlers may also require to have some arguments. In React, an extra argument can be passed to the event handler.
class Mypanel extends React.Component { constructor(props) { super(props); this.state={num:0}; } add(a,b) { this.setState({num:(a+b)}); } render() { return <div><hr/> <button onClick={this.add.bind(this,10,13)}>Add</button> {this.state.num} </div>; } } ReactDOM.render(<Mypanel />,document.getElementById('root'));
The same can also be done as,
class Mypanel extends React.Component { constructor(props) { super(props); this.state={num:0}; } add(a,b) { this.setState({num:(a+b)}); } render() { return <div><hr/> <button onClick={(e)=>this.add(10,13,e)}>Add</button> {this.state.num} </div>; } } ReactDOM.render(<Mypanel />,document.getElementById('root'));
Here e is the React event that is passed to the arrow function explicitly.