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

В React, вместо использования атрибута onclick в HTML, мы используем свойство onClick для обработки событий клика. Вот пример простого компонента в React с обработкой события клика:

import React from 'react';
function MyButton() {
 // Функция-обработчик события клика
 const handleClick = () => {
   console.log('Button clicked!');
 };
 return (
   <button onClick={handleClick}>
     Click me
   </button>
 );
}
export default MyButton;

В этом примере:

1. Мы определяем функцию handleClick, которая будет вызываться при клике на кнопку.
2. Мы добавляем свойство onClick к кнопке и назначаем ему функцию handleClick.
3. Когда пользователь нажимает на кнопку, вызывается функция handleClick, которая выводит сообщение в консоль.

Вы также можете определить функцию-обработчик события непосредственно в onClick:

import React from 'react';
function MyButton() {
 return (
   <button onClick={() => console.log('Button clicked!')}>
     Click me
   </button>
 );
}
export default MyButton;

В этом случае мы определяем анонимную стрелочную функцию непосредственно в onClick, которая выполняется при клике на кнопку.

Обратите внимание, что в React мы используем camelCase для именования свойств, таких как onClick, вместо kebab-case, как в HTML (onclick).

Также важно отметить, что в React мы, как правило, избегаем использования глобальных переменных и функций, предпочитая передавать необходимые данные и функции в компоненты через их свойства (props).