Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Handling events in React.js
There are some syntactical differences in writing events but it is handled similar to DOM elements event handling.
The name of event handlers are written in camel case notations.
Example
Event in simple html −
<button onclick=”addUser()”>
Add User
</button>
Event in React with jsx:
<button onClick={ addUser }>
Add User
</button>One of the difference is we do not write return false to prevent default behavior in React. Instead of that we specifically write event.preventDefault()
Example
In simple Html −
<button onclick=”console.log(‘Add user event clicked’); return false;”> Add User </button>
In React it will be written as −
function addUser(event){
event.preventDefault();
console.log(‘Add user event clicked’);
}
<button onClick={ addUser }>
Add User
</button>Here event passed in React is synthetic and cross browser compatible. A method in ES6 can be an event handler. In JavaScript classes, methods are not bound to class by default. These methods in class should be declared in constructor with binding as shown below −
constructor(props){
super(props);
this.addUser=this.addUser.bind(this);
}Or we can use arrow functions which will bind the methods automatically and then no need to add bind in constructor.
adduser=()=>{
}If we are not using arrow functions , another alternative is to call the method and binding on React element itself −
addUser(){
}
<button onClick={ (e)=>{this.addUser(e)}}>
Add User
</button>The problem with above anonymous callback function is , it will be created every time button renders on the screen and it can affect performance.
Passing arguments to event handlers
<button onClick={ (e)=>this.addUser(id, e) }></button>Or
<button onClick={ this.addUser.bind(this, id) }></button>In the above event handler we are passing id as an argument and event object as second argument. The event argument is visible in arrow function but in second approach it is passed implicitly so we have not provided it.
420 Views
