In React events are an important way to interact with the user and trigger actions in your application. Events in React are similar to events in HTML, such as click, focus, and submit.
To handle an event in a React component, you can use the on prefix followed by the name of the event you want to handle. For example, to handle a click event on a button, you can use the onClick event handler:
import React from 'react';
class MyComponent extends React.Component {
handleClick = () => {
console.log('Button was clicked!');
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
In this example, the handleClick function is an event handler that is called when the button is clicked. It logs a message to the console.
Here is a list of some of the most commonly used events in React:
onClick: called when an element is clickedonChange: called when an element’s value changes, such as when a user types in a form fieldonSubmit: called when a form is submittedonFocus: called when an element receives focusonBlur: called when an element loses focusonKeyDown: called when a user presses a key down
onChange:
Here is an example of how to use the onChange event in a React component:
import React from 'react';
class MyForm extends React.Component {
state = {
name: ''
};
handleChange = (event) => {
this.setState({
name: event.target.value
});
}
render() {
return (
<form>
<label>
Name:
<input type="text" value={this.state.name} onChange={this.handleChange} />
</label>
</form>
);
}
}
In this example, the MyForm component has a state variable called name that is used to store the value of a form input. The input has an onChange event handler that is called whenever the value of the input changes, such as when a user types in the input. The event handler updates the name state variable with the new value of the input.
This allows you to keep the value of the input in sync with the component’s state, which can be useful for storing and validating user input.
onSubmit:
Here is an example of how to use the onSubmit event in a React component:
import React from 'react';
class MyForm extends React.Component {
state = {
name: ''
};
handleChange = (event) => {
this.setState({
name: event.target.value
});
}
handleSubmit = (event) => {
event.preventDefault();
console.log(`Submitting form with name: ${this.state.name}`);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.name} onChange={this.handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
}
In this example, the MyForm component has a state variable called name that is used to store the value of a form input. The form has an onSubmit event handler that is called when the form is submitted. The event handler prevents the default form submission behavior and logs a message to the console with the value of the name state variable.
This allows you to handle form submissions in your React components and perform any necessary actions, such as sending the form data to a server or validating the input.
onFocus:
Here is an example of how to use the onFocus event in a React component:
import React from 'react';
class MyForm extends React.Component {
state = {
name: ''
};
handleChange = (event) => {
this.setState({
name: event.target.value
});
}
handleFocus = (event) => {
console.log(`Input with name "${event.target.name}" received focus.`);
}
render() {
return (
<form>
<label>
Name:
<input type="text" name="name" value={this.state.name} onChange={this.handleChange} onFocus={this.handleFocus} />
</label>
</form>
);
}
}
In this example, the MyForm component has a state variable called name that is used to store the value of a form input. The input has an onFocus event handler that is called when the input receives focus. The event handler logs a message to the console with the name of the input that received focus.
This allows you to handle focus events in your React components and perform any necessary actions, such as displaying a tooltip or highlighting the input.
onBlur:
Here is an example of how to use the 'onBlur' event in a React component:
import React from 'react';
class MyForm extends React.Component {
state = {
name: ''
};
handleChange = (event) => {
this.setState({
name: event.target.value
});
}
handleBlur = (event) => {
console.log(`Input with name "${event.target.name}" lost focus.`);
}
render() {
return (
<form>
<label>
Name:
<input type="text" name="name" value={this.state.name} onChange={this.handleChange} onBlur={this.handleBlur} />
</label>
</form>
);
}
}
In this example, the MyForm component has a state variable called name that is used to store the value of a form input. The input has an onBlur event handler that is called when the input loses focus. The event handler logs a message to the console with the name of the input that lost focus.
This allows you to handle blur events in your React components and perform any necessary actions, such as validating the input or saving the value to a server.
onKeyDown:
Here is an example of how to use the onKeyDown event in a React component:
import React from 'react';
class MyForm extends React.Component {
state = {
name: ''
};
handleChange = (event) => {
this.setState({
name: event.target.value
});
}
handleKeyDown = (event) => {
if (event.key === 'Enter') {
console.log('Enter key was pressed!');
}
}
render() {
return (
<form>
<label>
Name:
<input type="text" name="name" value={this.state.name} onChange={this.handleChange} onKeyDown={this.handleKeyDown} />
</label>
</form>
);
}
}
In this example, the MyForm component has a state variable called name that is used to store the value of a form input. The input has an onKeyDown event handler that is called when a key is pressed down while the input has focus. The event handler checks if the key that was pressed down is the Enter key, and logs a message to the console if it is.
This allows you to handle key press events in your React components and perform any necessary actions, such as submitting a form or triggering an action with a specific key combination.