Handling Events

Event Handling Basics

React events are named using camelCase:

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Passing Arguments

Use arrow functions to pass arguments:

function ItemList({ items }) {
  function handleDelete(id) {
    // Delete item with id
  }

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          <button onClick={() => handleDelete(item.id)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

Form Events

Handle form inputs with onChange:

function Form() {
  const [value, setValue] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    console.log('Submitted:', value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Common Events

• onClick - Mouse click
• onChange - Input value change
• onSubmit - Form submission
• onMouseEnter - Mouse enters element
• onFocus - Element receives focus
• onBlur - Element loses focus

Preventing Default Behavior

function Link() {
  function handleClick(e) {
    e.preventDefault();
    console.log('Link clicked');
  }

  return <a href="/" onClick={handleClick}>Click</a>;
}