在 React Js 中更改 Segment 的图标

编程问答 2022-05-17

问题描述

我正在使用功能组件为 React Js 实现一个 Segment bar。目前我正在更改突出显示按钮索引的颜色。 这是我的 Segment 代码

import React,{ useState } from "react";
import "./segment.css";

const buttons = [
  { name: "Bat" },{ name: "Ball" },{ name: "Tennis" },{ name: "Shuttle" },];

const Segment = () => {
  const [activeIndex,setActiveIndex] = useState(0);

  return (
    <div>
      {buttons.map((u,i) => (
        <button
          className={i === activeIndex ? "segment_active" : "segment_inActive"}
          onClick={() => setActiveIndex(i)}
          key={u.name}
        >
          {u.name}
        </button>
      ))}
    </div>
  );
};

export default Segment;

上面的代码按预期工作，但现在我需要放置一个图标而不是名称并使其突出显示。

我的图标名称是 Bat_active 和 Bat_InActive 等。 有人可以告诉我如何更改按钮单击上的活动图标吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

buttonbuttonreactjsreactjssegment