React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React’s virtual DOM.

1. Handling Events in React

Key Points:

• Event handlers in React are written as camelCase (e.g., onClick, onChange).
• Handlers are passed as functions, not strings (e.g., onClick={() => alert('Clicked!')}).

Common Event Handlers

• Click Events: Triggered when an element is clicked.
• Input Events: Triggered when input fields change.
• Form Events: Triggered during form submission.

Handling Click Events

function ClickHandler() {
    const handleClick = () => {
        alert('Button clicked!');
    };

    return <button onClick={handleClick}>Click Me</button>;
}

Handling Input Events

function InputHandler() {
    const handleChange = (event) => {
        console.log(event.target.value);
    };

    return <input type="text" onChange={handleChange} />;
}

Handling Form Submission

function FormHandler() {
    const handleSubmit = (event) => {
        event.preventDefault(); // Prevents default form submission behavior
        alert('Form submitted!');
    };

    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Submit</button>
        </form>
    );
}

2. Event Binding and Passing Data with Event Handlers

Event Binding

In React, event handlers automatically bind to the component instance, so you usually don’t need explicit binding as in class components. However, in class components, you can bind methods in three ways:

1. Arrow Functions in JSX (recommended):

   <button onClick={() => this.handleClick()}>Click Me</button>
   

2. Bind in the Constructor:

   constructor() {
       super();
       this.handleClick = this.handleClick.bind(this);
   }
   

3. Class Properties (ES6):

   handleClick = () => {
       console.log('Button clicked!');
   };
   

Passing Data with Event Handlers

1. Using Arrow Functions:

   function Greet({ name }) {
       const handleClick = () => {
           alert(`Hello, ${name}!`);
       };
   
       return <button onClick={handleClick}>Greet</button>;
   }
   
   function App() {
       return <Greet name="John" />;
   }
   

2. Passing Arguments:

   • Use an arrow function to pass arguments:

     function Button({ message }) {
         const handleClick = (msg) => {
             alert(msg);
         };
     
         return <button onClick={() => handleClick(message)}>Click Me</button>;
     }
     

3. Preventing Default Behavior

• Use event.preventDefault() to stop default browser actions:

  function LinkHandler() {
      const handleClick = (event) => {
          event.preventDefault();
          alert('Default action prevented!');
      };
  
      return <a href="https://example.com" onClick={handleClick}>Click Me</a>;
  }
  

4. Accessing Event Data

React’s event handling uses a synthetic event system, which wraps the browser’s native event and normalizes cross-browser compatibility.

• Access event properties like target, type, etc.:

  function InputLogger() {
      const handleInput = (event) => {
          console.log(`Input value: ${event.target.value}`);
      };
  
      return <input type="text" onChange={handleInput} />;
  }
  

Summary

By combining event handlers with state or props, React allows for building dynamic and interactive UIs.

References