Как при нажатии на кнопку считать ее ClassName в переменную? (React js)
пример кода нужен
Вот пример кода на React JS, который демонстрирует, как считать className кнопки при нажатии и сохранить его в переменную:
```jsx
import React, { useState } from 'react';
function ButtonExample() {
const [buttonClass, setButtonClass] = useState('');
const handleClick = (event) => {
const clickedButtonClass = event.currentTarget.className;
setButtonClass(clickedButtonClass);
console.log('Класс нажатой кнопки:', clickedButtonClass);
};
return (
<div>
<button className="btn-primary" onClick={handleClick}>
Первая кнопка
</button>
<button className="btn-secondary" onClick={handleClick}>
Вторая кнопка
</button>
<p>Класс последней нажатой кнопки: {buttonClass}</p>
</div>
);
}
export default ButtonExample;
```
В этом примере:
1. Мы используем хук `useState` для создания переменной состояния `buttonClass`, которая будет хранить класс последней нажатой кнопки[2].
2. Функция `handleClick` вызывается при нажатии на кнопку. Она получает объект события `event` в качестве аргумента[2].
3. Внутри `handleClick` мы используем `event.currentTarget.className` для получения класса нажатой кнопки. `currentTarget` всегда указывает на элемент, к которому прикреплен обработчик события[1][3].
4. Полученный класс сохраняется в переменную состояния `buttonClass` с помощью `setButtonClass`[2].
5. В JSX мы создаем две кнопки с разными классами и привязываем к ним обработчик `handleClick`[2].
6. Под кнопками выводится параграф, показывающий класс последней нажатой кнопки.
При нажатии на любую из кнопок, её класс будет сохранен в `buttonClass` и отображен на странице. Это позволяет динамически отслеживать и использовать классы нажатых элементов в React-приложении[2][3].
[1] https://stackoverflow.com/questions/61378343/how-to-get-react-buttons-click-events-and-class-name-from-vanilla-javascript
[2] https://blog.logrocket.com/react-onclick-event-handlers-guide/
[3] https://bobbyhadz.com/blog/react-get-class-name-of-element
[4] https://react-bootstrap.netlify.app/docs/components/buttons/
[5] https://www.shecodes.io/athena/10997-how-to-add-an-onclick-event-in-react
[6] https://stackoverflow.com/questions/38286199/how-to-check-the-class-name-of-the-event-target-in-reactjs
export const Component = () => {
const getClassName = (e) => console.log(e.target.className)
return (
<button onClick={getClassName}>Text</button>
)
} import { useRef, useState } from 'react'
export default function App() {
const [ className, setClassName ] = useState(null)
const ref = useRef(null)
const handleGetClassName = (e) => {
setClassName(e.target.classList[0])
}
console.log(className) //Для наглядности
return (
<div className='App'>
<div className="someClassName" onClick={handleGetClassName} ref={ref}>Get className</div>
</div>
)
} 