Как передать параметр в обработчик события onClick, не вызвав его немедленно?

Передача параметров в обработчик onClick

В React и JavaScript важно передавать параметры в обработчики событий так, чтобы функция не вызывалась немедленно при рендере компонента. Если написать onClick={handleClick(param)}, то handleClick выполнится сразу, а не по клику, что часто приводит к ошибкам.

Основные способы

• Стрелочная функция: onClick={() => handleClick(param)} — создает новую функцию, которая будет вызвана при событии. Это самый распространенный и читаемый способ.
• Метод .bind: onClick={handleClick.bind(null, param)} — возвращает новую функцию с привязанным контекстом и аргументами. Может быть менее производительным при частых ререндерах, но работает корректно.

Пример кода

function Button({ id }) {
  const handleClick = (param) => {
    console.log('Clicked:', param);
  };

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

В этом примере id передается в handleClick только при клике, а не при рендере.

Вывод

Используйте стрелочные функции для передачи параметров в обработчики событий в React — это просто, безопасно и соответствует лучшим практикам. Избегайте прямого вызова функций в JSX, чтобы предотвратить неожиданное выполнение кода.