Reactjs 默认情况下将活动类添加到类列表中的第一个元素，并在单击react 时更改活动类

发布于07月16日

我是react的新手.我在css文件中有两个类.一个是btn，另一个是btn活动.我想在默认情况下将btn活动类设置为第一个按钮，当我单击其他按钮时，它将被删除并添加到当前按钮.如果有人在这方面帮助我，我将不胜感激.提前谢谢.

import { useState } from "react";
import buttons from "../data/buttons.json";

const Home = () => {
  return (
    <div>
      {buttons.map((item, index) => {
        return (
          <button key={index} className="btn">
            {item.valu}
          </button>
        );
      })}
    </div>
  );
};

推荐答案

保持状态以处理所选按钮索引.

try 以下操作:

import { useState } from "react";

const Home = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <div>
      {buttons.map((item, index) => {
        return (
          <button
            key={index}
            onClick={() => setSelectedIndex(index)}
            className={`btn ${selectedIndex === index ? "active" : ""}`}
          >
            {item.valu}
          </button>
        );
      })}
    </div>
  );
};