Events in React

In React, Events are interactions or occurrences triggered by users or other sources.

Handling events in React is similar to handling events in regular HTML, but there are some differences due to the nature of React components.

In React, we can handle events in Functional components with hooks which provides a modern approach to handle events, while class components require manual binding of event handlers and a more traditional approach.

Events Handling in React:

Event Naming:

React follows a `camelCase` naming convention for event names. For example, instead of using `onclick` (as in HTML), we have to use "onClick", similarly `onchange` to "onChange" and many more.

Event Handling in JSX:

In JSX, we pass a function as an event handler using curly braces {}. The function will be called when the event occurs.

Example:

<button onClick={handleOnClick}>Click me</button>
<input type="text" onChange={(e) => handleOnChange(e)} value={value}/>

Event Handler Function:

Define a function to handle the event. This function should be within the class or a functional component.

Example:

function handleOnClick() {
  console.log('Button Clicked!');
}

Event Object:

React passes an event object to our event handler function by default.

We can access this object if needed, e.g., to get information about the event.

Example:

function handleOnClick(event) {
  console.log('Button Clicked!', event);
}

function handleOnChange(event) {
  console.log('Input Field Updated!', event.target.value);
  console.log('Input Field Key Access', event.target.key);
}

Event Handling in Class Component:

In the Class Component, we need to `bind` handler functions in the component with a class instance. we can use bind functions using the `this` keyword and `.` dot operator and event handler name. for ex: - `this.handleOnChange`.

Example:

import React, { Component } from 'react';

class YourComponent extends Component {
 constructor(props) {
   super(props);
   this.state = {
    fullname: ""
   }
 }

  handleOnChange(e) {
    this.setState({ fullname: e.target.value });
    console.log('User enter input through keyboard!');
  };

  handleOnClick() {
    console.log('Button clicked!');
  }

  render() {
    return (
     <div>
      <input type="text" value={this.state.fullname} onChange={this.handleOnChange} />
      <button onClick={this.handleOnClick}>Click me!</button>
     </div>
    );
  }
}

export default YourComponent;

Event Handling in Functional Component:

In functional components, we can handle events by passing event handler functions directly to the JSX elements.

Example:

import React, { useState } from 'react';

const YourComponent = () => {
  const [fullname, setFullName] = useState("");

  const handleOnChange = (e) => {
    setFullName(e.target.value);
    console.log('User enter input through keyboard!');
  };

  const handleOnClick = (e) => {
    console.log('Button clicked!', e);
  };

  return (
      <div>
       <input type="text" value={fullname} onChange={(e) => handleOnChange(e)} />
       <button onClick={(e) => handleOnClick(e)}>Click me!</button>
     </div>
  );
};

export default YourComponent;

<-- React Props

React Conditionals -->