DEV Community

Md Yusuf
Md Yusuf

Posted on

Event Handling in React

Event handling in React allows you to respond to user interactions like clicks, form submissions, and other events. Here’s a basic overview and example:

Basic Concepts

  1. Event Binding: In React, you typically use camelCase for event names (e.g., onClick, onChange).
  2. Event Handling: You can pass a function as an event handler directly in JSX.
  3. Synthetic Events: React wraps the native events in a synthetic event to ensure cross-browser compatibility.

Example

Here's a simple example of handling a button click and an input change:

import React, { useState } from 'react';

const EventHandlingExample = () => {
  const [inputValue, setInputValue] = useState('');

  const handleClick = () => {
    alert(`Button clicked! Input value: ${inputValue}`);
  };

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
        placeholder="Type something..." 
      />
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default EventHandlingExample;
Enter fullscreen mode Exit fullscreen mode

Key Points

  • State Management: Use useState to manage the state in functional components.
  • Event Object: The event handler receives an event object that contains information about the event.
  • Prevent Default: Use event.preventDefault() to prevent the default behavior of events (like form submissions).

Feel free to ask if you need specific examples or further explanations!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay