React Events
React Events
An event is an action that triggers a response of the user action or system-generated event. As HTML, React can also perform actions based on user events. React has the same events as HTML: change, mouse over, click, etc.
React has its event handling system, which is much similar to handling the events on DOM elements. This React event handling system is called as Synthetic events.
There are some differences between handling the events with react and handling the events with DOM. These are:
- The naming convention of the React event is in camelCase instead of lowercase.
For example:
onClick instead of onclick.
- With JSX, a function is treated as an event handler instead of a string.
For example:
React event handlers are written in the curly braces:
onClick= {show} instead of onclick=”show()”.
- Declaration of Event in HTML:
- Declaration of Event in React:
- In react, we cannot return the false for preventing the default behavior, rather than we have to call preventDefault event for preventing the default behavior.
For example:
- In HTML, for preventing the default link behavior to open a new page, we write as:
Hello
- In React, it can be written as:
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('You visited a Link.');
}
return (
Hello
);
}
Event Handler Example
The below example defines how to generate an event in React.
import React, { Component } from 'react';
class App extends React.Component {
hello() {
alert("!!!!! Hello World !!!!!");
}
render() {
return (
Event Handler Example
Click the following button to generate the event
);
}
}
export default App;
Output:
Once you click on the button, you will get the following output.
Child Event
When we require updating the state of the parent component from its child, we can create an event handler (updateState) inside the parent component, and it will pass as a prop (updateStateProp) to the child component where we can call it.
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Hello World!!!!'
}
this.updateState = this.updateState.bind(this);
};
updateState() {
}
render() {
return (
Child Event Example
{this.props.myDataProp}
);
}
}
export default App;
Output:
After compiling the above code, you will get the following output:
Once you click on the button, you will get the following output:
