CodesJava

Easy learning with example program codes

Events in ReactJS

React Events

An action triggered as a result of the user action or system-generated event is termed as an event. The React event handling system, also known as Synthetic Events is a cross-browser wrapper of the browser’s native event and is much like handling events on DOM elements but have some syntactic differences.

  • The events in ReactJS use naming as camelCase instead of lowercase.
  • A function in ReactJS is passed as the event handler with the use of JSX, instead of passing it as a string.
  • To prevent the default behaviour, the preventDefault event must be called explicitly in ReactJS instead of returning false.

Example:

import React, { Component } from 'react';  
class App extends React.Component {  
constructor(props) {  
super(props);  
this.state = {  
StudName: ''  
};  
}  
changeText(event) {  
this.setState({  
StudName: event.target.value  
});  
}  
render() {  
return (  
<div>  
<h2>Event</h2>  
<label htmlFor="name">Student name: </label>  
<input type="text" id="StudName" onChange={this.changeText.bind(this)}/>  
<h4>Entered name: { this.state.StudName }</h4>  
</div>  
);  
}  
}  
export default App;

Output 1:

Output 2:

Please follow and like us:
error









Copyright © 2019 CodesJava DMCA.com Protection Status