Events play a vital role in creating interactive and dynamic user interfaces in React. In this tutorial, we will explore how to handle events in React and respond to user actions effectively.
Event Handling in JSX
React provides a synthetic event system that wraps the native browser events and normalizes them across different browsers. We can attach event handlers directly to JSX elements using the onEventName attribute.
Example:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
Event Handlers and Event Objects
When an event is triggered, React automatically passes an event object to the event handler function. We can access this object to get additional information about the event, such as target element, mouse coordinates, etc.
Example:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
Binding Event Handlers
When passing event handlers as props, it's important to bind them to the component instance. This ensures that the correct this context is maintained when the event is triggered.
Example:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
Event Propagation and Preventing Default Actions
React uses a synthetic event system that automatically handles event propagation. To prevent the default browser behavior, such as form submission or link navigation, we can call the event.preventDefault() method.
Example:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>By understanding how to handle events in React, you can create interactive and responsive user interfaces that seamlessly respond to user actions
Here is a list of common events in React
1. onClick: This event occurs when an element is clicked.
Example:
<button onClick={handleClick}>Click Here</button>2. onChange: This event occurs when the value of an input element (input, select, textarea) changes.
Example:
<input type="text" onChange={handleChange} />3. onSubmit: This event occurs when a form is submitted. Example:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>4. onMouseEnter: This event occurs when the mouse pointer enters an element.
Example:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div>5. onMouseLeave: This event occurs when the mouse pointer leaves an element.
Example:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div>6. onKeyDown: This event occurs when a key is pressed down.
Example:
<input type="text" onKeyDown={handleKeyDown} />7. onKeyUp: This event occurs when a key is released.
Example:
<input type="text" onKeyUp={handleKeyUp} />8. onFocus: This event occurs when an element receives focus.
Example:
<input type="text" onFocus={handleFocus} />9. onBlur: This event occurs when an element loses focus.
Example:
<input type="text" onBlur={handleBlur} />10. onScroll: This event occurs when an element is scrolled.
Example:
<div onScroll={handleScroll}>Scrollable Content</div>
These are just some examples of common events in React. You can use these events or create custom events according to your needs in your React application.