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;
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;
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 (); } } export default App;Event
Entered name: { this.state.StudName }
Output 1: