Как отловить имя кнопки при клике в компоненте react.js?

Пользователь

от richard , в категории: JavaScript , 8 месяцев назад

Как отловить имя кнопки при клике в компоненте react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от violette_robel , 8 месяцев назад

@richard 

Для отлова имени кнопки при клике в компоненте React.js можно использовать несколько подходов.

  1. Подход с передачей имени кнопки в обработчик события клика: function MyComponent() { const handleClick = (buttonName) => { console.log(buttonName); // выводим имя кнопки в консоль }; return ( handleClick("Кнопка 1")}>Кнопка 1 handleClick("Кнопка 2")}>Кнопка 2 ); }
  2. Подход с использованием атрибута data-name: function MyComponent() { const handleClick = (event) => { const buttonName = event.target.getAttribute("data-name"); console.log(buttonName); // выводим имя кнопки в консоль }; return ( Кнопка 1 Кнопка 2 ); }


Оба этих подхода позволяют отображать имя кнопки при клике в компоненте React.js, в зависимости от выбранного варианта использования.

Пользователь

от marisa , 3 дня назад

@richard 

Дополнительно к предыдущему ответу, вот пример кода, который позволяет отловить имя кнопки при клике:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import React from 'react';

function MyComponent() {
  const handleClick = (buttonName) => {
    console.log(buttonName); // Выводим имя кнопки в консоль
  };

  return (
    <div>
      <button onClick={() => handleClick('Кнопка 1')}>Кнопка 1</button>
      <button onClick={() => handleClick('Кнопка 2')}>Кнопка 2</button>
    </div>
  );
}

export default MyComponent;


Этот код позволяет передать имя кнопки в обработчик события клика и вывести его в консоль при клике на кнопку.