onClick

Событие onClick срабатывает, когда пользователь нажимает на элемент — например, кнопку, ссылку или любой другой кликабельный компонент.

Использование

Обработчик onClick передаётся как пропс в JSX-элемент:

<button onClick={handleClick}>Нажми меня</button>

Функция handleClick будет вызвана при каждом клике. Она может быть определена внутри компонента:

function Button() {
  function handleClick() {
    console.log('Кнопка нажата');
  }

  return <button onClick={handleClick}>Нажми</button>;
}

Доступ к событию

Обработчик может принимать объект события как аргумент:

function handleClick(event) {
  console.log(event.target); // элемент, по которому кликнули
}

Это позволяет получать информацию о контексте клика, например, значение кнопки или её атрибуты.

Передача дополнительных данных

Если нужно передать данные в обработчик, используйте стрелочную функцию:

<button onClick={() => handleDelete(id)}>Удалить</button>

Важно: не вызывайте функцию напрямую (onClick={handleDelete(id)}), иначе она выполнится сразу при рендере.

Особенности

  • onClick работает на любом элементе, даже если он не интерактивный (например, <div>), но для доступности лучше использовать семантические теги (<button>) или добавлять role="button".
  • В мобильных браузерах onClick может иметь небольшую задержку; для мгновенного отклика иногда используют onTouchStart, но это редко требуется в современных приложениях.