Как при нажатии на кнопку считать ее ClassName в переменную? (React js)

Question

Как при нажатии на кнопку считать ее ClassName в переменную? (React js)

☀︎Питруха☀︎ Мастер (1806), на голосовании 2 месяца назад

Дополнен 3 месяца назад

пример кода нужен

Answer 1

Андрей Устинов Мастер (2150) 3 месяца назад

 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 ( 
     
      Get className
 
    
 
  ) 
}

Андрей УстиновМастер (2150) 3 месяца назад

useRef лишний. забыл убрать

☀︎Питруха☀︎Мастер (1806) 3 месяца назад

спасибо классно, но это не то что мне нужно. У меня кнопка используется в другом компоненте и имя класса меняется с учетом передаваемой пропс, а когда я использую твой метод класснэйм используется старый, т.е. без добавления пропс

Андрей Устинов Мастер (2150) ☀︎Питруха☀︎, у тебя проблема вообще в том, что ты не инициализировал состояние className. в моём коде я же использую useState.

☀︎Питруха☀︎Мастер (1806) 3 месяца назад

я через переменную сделал. спасибо за помощь )

Answer 2

Петр Алексеевич Оракул (82071) 3 месяца назад

 export const Component = () => {
  const getClassName = (e) => console.log(e.target.className)

  return (
    
  )
}

☀︎Питруха☀︎Мастер (1806) 3 месяца назад

а этот метод можно испаользовать после того как к имени класса приплюсовалось значение из пропс

Петр Алексеевич Оракул (82071) ☀︎Питруха☀︎, конкретно в этом куске будет считываться класс кнопки, которая была нажата, и считывать будет в момент нажатия. Если нужно в переменную записать, то можешь использовать useState и useEffect для обновления переменной в момент изменения класса. Но вообще звучит как очень странная задача, скорее всего ее можно по-другому решить

☀︎Питруха☀︎Мастер (1806) 3 месяца назад

ну вообще у меня есть таблица с товарами и на против каждого товара стоит кнопка "редактировать" и чтобы указать на определенный товар я придумал передавать ID товара через className чтобы выбирать потом товар из базы данных по его id для последующего отрисовывания его полного описания,

Answer 3

Вот пример кода на 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