Как отловить имя кнопки при клике в компоненте react?
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 создает кнопку с именем, переданным в качестве аргумента.
@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 и сделать с ним нужные действия.