Event Handling in React

Handling events in React is similar to handling events in vanilla JavaScript, but React provides a more declarative and efficient way to do so.

Here’s an example of how to handle events in React:

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      Click me
    );
  }
}

In the above example, we defined a class component called MyComponent with a handleClick method that logs a message when the button is clicked. We then render a button element with an onClick event handler that calls the handleClick method.

React also provides a SyntheticEvent object which is a cross-browser wrapper around the browser’s native event. This object contains useful properties and methods for handling events in a consistent manner.

To prevent the default behavior of an event, you can call the preventDefault method on the SyntheticEvent object:

class MyForm extends React.Component {
  handleSubmit(event) {
    event.preventDefault();
    // Handle form submission
  }

  render() {
    return (
      
        
        Submit
      
    );
  }
}

In this example, we defined a class component called MyForm with a handleSubmit method that prevents the default form submission behavior when the form is submitted. We then render a form element with an onSubmit event handler that calls the handleSubmit method.

Overall, event handling in React is straightforward and efficient, making it easy to create interactive and dynamic user interfaces.