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

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

от elissa , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от craig.emmerich , 2 года назад

@elissa 

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

1
2
3
4
5
6
7
function handleClick(event) {
  console.log(event.target.name);
}

function Button({ name }) {
  return <button name={name} onClick={handleClick}>{name}</button>;
}


В этом примере функция handleClick выводит в консоль имя кнопки, когда она нажимается. Функция Button создает кнопку с именем, переданным в качестве аргумента.

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

от guillermo , 10 месяцев назад

@elissa 

Когда кнопка кликается, в компоненте React автоматически обрабатывается событие onClick. Вы можете создать обработчик этого события и проверить имя кнопки с помощью события.


Вот пример:

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

class MyComponent extends React.Component {
  handleClick = (event) => {
    const buttonName = event.target.name; // получаем имя кнопки из события
    console.log(buttonName); // выводим имя кнопки в консоль
  }

  render() {
    return (
      <div>
        <button name="button1" onClick={this.handleClick}>Button 1</button>
        <button name="button2" onClick={this.handleClick}>Button 2</button>
        <button name="button3" onClick={this.handleClick}>Button 3</button>
      </div>
    );
  }
}


В этом примере, у каждой кнопки есть name атрибут со значением кнопки. При клике на кнопку, обработчик handleClick вызывается, и событие передается в виде аргумента. Внутри обработчика, мы можем получить имя кнопки из event.target.name и сделать с ним нужные действия.