Как изменить класс только у одного конкретного элемента?

Question

Анжелика

javascript , react

Как изменить класс только у одного конкретного элемента?

Как сделать так, чтобы при нажатии на кнопку менялся класс только у этой кнопки, а также менялся класс у других кнопок при нажатии на них, при этом у ранее нажатой кнопки класс сохранился? <pre><code class="typescript">const btn = (id) =&gt;{
  let play = [...todo].map(item =&gt;{
    if(item[0] == id){
      setIcon(!icon)
    }
    return item
  })
  setTodo(play)
}
const btnIcon = icon ? 'icon-pause' : 'icon-play'

&lt;button className={`icon ${btnIcon}`} onClick={() =&gt; btn(item[0])}&gt;&lt;/button&gt;</code></pre> <br/>

29 декабря 2024 г. 15:53

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы реализовать функционал, при котором при нажатии на кнопку меняется её класс, а также сохраняется стиль ранее нажатой кнопки, вы можете использовать состояние для хранения текущей нажатой кнопки. Ниже представлю обновленный пример с пояснениями.

Для этого:

1. Сохраняйте ID нажатой кнопки в состоянии.
2. При рендере кнопки проверяйте, является ли её ID текущей нажатой кнопкой, и задавайте соответствующий класс.

Вот пример кода на React:

```javascript
import React, { useState } from 'react';

const ButtonGroup = ({ todo }) => {
  const [activeId, setActiveId] = useState(null);
  const [icon, setIcon] = useState(false);

  const handleButtonClick = (id) => {
    // Если нажата уже активная кнопка, просто переключаем иконку
    if (id === activeId) {
      setIcon(!icon);
    } else {
      // Сохраняем ID новой кнопки и меняем иконку
      setActiveId(id);
      setIcon(true); // Или false, в зависимости от вашей логики
    }
  };

  return (
    <div>
      {todo.map(item => {
        const isActive = activeId === item[0]; // Определяем, активная ли кнопка
        const btnIcon = isActive ? (icon ? 'icon-pause' : 'icon-play') : 'icon-default'; // Ваш класс по умолчанию

        return (
          <button
            key={item[0]}
            className={`icon ${btnIcon}`}
            onClick={() => handleButtonClick(item[0])}
          >
            {/* Содержимое кнопки можно задавать здесь */}
            {item[1]}
          </button>
        );
      })}
    </div>
  );
};

export default ButtonGroup;
```

### Что здесь происходит:

1. **Состояние `activeId`:** Хранит ID активной кнопки. Когда кнопка нажата, ее ID присваивается `activeId`.
2. **Состояние `icon`:** Используется для хранения состояния иконки (пауза или воспроизведение).
3. **`handleButtonClick`:** Функция обрабатывает нажатие на кнопку. Если нажата уже активная кнопка, просто переключает состояние `icon`. Если нажата новая кнопка, она становится активной, а `icon` устанавливается на true (или false в зависимости от вашей логики).
4. **Рендер кнопок:** При рендеринге кнопок мы проверяем, является ли кнопка активной (по ID), чтобы задать ей нужный класс.

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

Answer 2

import React, {useState} from 'react';

export function App(props) {
  let buttons = ["Text1", "Text2"];
  const [activeButton, setActiveButton] = useState(-1);

  return (

    <div className='App'>
    {buttons.map((name, i) => (
      <button key={i} className={i === activeButton ? "active_button" : ""} onClick={() => setActiveButton(i)}>{name}</button>

    ))}
    </div>
  );
}