Handling Events in React

Event handling in React allows you to respond to user interactions such as clicks, form input, keyboard actions, and mouse movements.

Basic Event Handling

React events are written in camelCase and passed as functions.

function ClickButton() {
  function handleClick() {
    alert("Button clicked!");
  }

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

Inline Event Handlers

<button onClick={() => console.log("Clicked")}>
  Click
</button>

Use inline handlers for simple actions.

Passing Arguments to Event Handlers

function Item({ name }) {
  function handleSelect(item) {
    alert(item);
  }

  return (
    <button onClick={() => handleSelect(name)}>
      Select
    </button>
  );
}

Common React Events

Handling Form Events

Input Field Example

function InputExample() {
  const [value, setValue] = React.useState("");

  return (
    <input
      type="text"
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
}

Form Submission

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log("Form submitted");
  }

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

Event Object

React provides a Synthetic Event (cross-browser wrapper).

function handleClick(event) {
  console.log(event.target);
}

Prevent Default Behavior

function handleLinkClick(e) {
  e.preventDefault();
  console.log("Link clicked");
}

Binding Events (Class Components)

class Button extends React.Component {
  handleClick = () => {
    console.log("Clicked");
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Best Practices

• Use descriptive handler names (handleClick, handleSubmit)

• Avoid inline handlers for complex logic

• Keep event logic simple

• Use state to reflect UI changes

Key Points

• React events use camelCase

• Pass functions, not function calls

• Use e.preventDefault() when needed

• Events work similarly to JavaScript events