Обработка событий в React

Добавление обработчиков событий в React:

Обработка событий в React подобна обработке событий в обычном JavaScript, но есть несколько отличий в синтаксисе. Вот примеры использования обработчиков событий в функциональных и классовых компонентах:

• Функциональные компоненты:

import React, { useState } from 'react';

function ButtonWithClick() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

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

• Классовые компоненты:

import React, { Component } from 'react';

class ButtonWithClick extends Component {
  handleClick = () => {
    console.log('Button clicked!');
  };

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

Передача функций в пропсах:

Часто бывает необходимо передавать обработчики событий из родительского компонента дочернему через пропсы. Вот пример:

• Функциональные компоненты:

import React from 'react';

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click me in child</button>;
}

function ParentComponent() {
  const handleClickInParent = () => {
    console.log('Button clicked in parent!');
  };

  return <ChildComponent onClick={handleClickInParent} />;
}

• Классовые компоненты:

import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return <button onClick={this.props.onClick}>Click me in child</button>;
  }
}

class ParentComponent extends Component {
  handleClickInParent = () => {
    console.log('Button clicked in parent!');
  };

  render() {
    return <ChildComponent onClick={this.handleClickInParent} />;
  }
}

В обоих примерах обработчик события (onClick) передается из родительского компонента (или контейнера) в дочерний компонент через пропс. Это делает код более модульным и позволяет использовать один и тот же компонент с разными обработчиками в разных местах приложения.