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

Обработка событий в 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) передается из родительского компонента (или контейнера) в дочерний компонент через пропс. Это делает код более модульным и позволяет использовать один и тот же компонент с разными обработчиками в разных местах приложения.

Lingualeo

Полезные ссылки:

zaka-zaka

Покупай игры выгодно

РЕКЛАМА, ООО «ГЕЙБСТОР» ИНН: 7842136365

zaochnik

Срочная помощь в написании всех видов работ

РЕКЛАМА, ООО «ЗАОЧНИК.КОМ.» ИНН: 7710949967

skyeng

Лучшие из курсов английского в Skyeng

РЕКЛАМА, ОАНО ДПО «СКАЕНГ» ИНН: 9709022748