Как переключать класс CSS между кнопками, отображаемыми с помощью map ()?

Опубликовано: 7 Августа, 2021

Мы можем изменить цвет кнопки при нажатии, а также изменить цвет ранее выбранной кнопки обратно на исходный исходный цвет с помощью функции map ().

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

 npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

 cd имя папки

Структура проекта: это будет выглядеть следующим образом.

Пример: В следующем примере мы сохранили имя текущей выбранной кнопки (или некоторый идентификатор) в состоянии.

Имя файла: App.js

HTML

 import React, { useState } from "react";
 
const App = () => {
  const menuItems = ["Easy", "Medium", "Hard"];
  const [activeButton, setActiveButton] = useState("");
 
  return (
    < div >
      {menuItems.map((level, idx) => {
        return (
          button <
            key={level}
            onClick={() => {
              setActiveButton(level);
            }}
            style={{
              backgroundColor: activeButton === level ? "lightblue" : ""
            }}
          >
            {level}
          </ button >
        );
      })}
    </ div >
  );
 }
 
export default App;

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Выход:

Цвет переключается между кнопкой при нажатии

Примечание. Одна вещь, о которой мы должны позаботиться, - это назвать кнопки по-другому. Кроме того, более обнадеживающий способ сделать это - использовать идентификаторы для кнопок, как показано ниже:

 const menuItems = [{id: 1, name: "Easy"}, 
                        {id: 2, name: "Medium"}, 
                        {id: 3, name: "Hard"}]

JavaScript Picked HTML CSS

Как переключать класс CSS между кнопками, отображаемыми с помощью map ()?

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ