In React, Events are interactions or occurrences triggered by users or other sources.
Handling events in React is similar to handling events in regular HTML, but there are some differences due to the nature of React components.
In React, we can handle events in Functional components with hooks which provides a modern approach to handle events, while class components require manual binding of event handlers and a more traditional approach.
React follows a `camelCase` naming convention for event names. For example, instead of using `onclick` (as in HTML), we have to use "onClick", similarly `onchange` to "onChange" and many more.
In JSX, we pass a function as an event handler using curly braces {}. The function will be called when the event occurs.
<button onClick={handleOnClick}>Click me</button>
<input type="text" onChange={(e) => handleOnChange(e)} value={value}/>Define a function to handle the event. This function should be within the class or a functional component.
function handleOnClick() {
console.log('Button Clicked!');
}
React passes an event object to our event handler function by default.
We can access this object if needed, e.g., to get information about the event.
function handleOnClick(event) {
console.log('Button Clicked!', event);
}
function handleOnChange(event) {
console.log('Input Field Updated!', event.target.value);
console.log('Input Field Key Access', event.target.key);
}
In the Class Component, we need to `bind` handler functions in the component with a class instance. we can use bind functions using the `this` keyword and `.` dot operator and event handler name. for ex: - `this.handleOnChange`.
import React, { Component } from 'react';
class YourComponent extends Component {
constructor(props) {
super(props);
this.state = {
fullname: ""
}
}
handleOnChange(e) {
this.setState({ fullname: e.target.value });
console.log('User enter input through keyboard!');
};
handleOnClick() {
console.log('Button clicked!');
}
render() {
return (
<div>
<input type="text" value={this.state.fullname} onChange={this.handleOnChange} />
<button onClick={this.handleOnClick}>Click me!</button>
</div>
);
}
}
export default YourComponent;
In functional components, we can handle events by passing event handler functions directly to the JSX elements.
import React, { useState } from 'react';
const YourComponent = () => {
const [fullname, setFullName] = useState("");
const handleOnChange = (e) => {
setFullName(e.target.value);
console.log('User enter input through keyboard!');
};
const handleOnClick = (e) => {
console.log('Button clicked!', e);
};
return (
<div>
<input type="text" value={fullname} onChange={(e) => handleOnChange(e)} />
<button onClick={(e) => handleOnClick(e)}>Click me!</button>
</div>
);
};
export default YourComponent;