多个按钮点击切换

点击新的按钮 背景颜色才会发生改变

JS

import React, { useState } from 'react'
import styles from './style.less'
import { Button } from 'antd';
import { PauseOutlined, CaretRightOutlined } from '@ant-design/icons';
const Index = () =>
{
    const [buttonData, setButtonData] = useState([
        {
            id: '01', nameCurrent: '模拟暂停', Unselected: '动态模拟', done: false, changColor: false
        },
        {
            id: '02', nameCurrent: '模拟暂停', Unselected: '动态模拟', done: false, changColor: false
        },
        {
            id: '03', nameCurrent: '模拟暂停', Unselected: '动态模拟', done: false, changColor: false
        },
    ])
    // 重置按钮 关闭按钮 以及颜色
    const reset = () =>
    {
        let newBtn = buttonData.map(item =>
        {
            return { ...item, done: false, changColor: false }
        })
        setButtonData(newBtn)
    }
    const isShowClick = (data, done) =>
    {
        let newBtn = buttonData.map(item =>
        {
            if (item.id === data.id)
            {
                return { ...item, done: !done, changColor: true }
            } else
            {
                return { ...item, done: false, changColor: false }
            }
        })

        setButtonData(newBtn)
    }

    return (
        <div className={styles.overall}>
            <div className={styles.core}>
                <div className={styles.head}>
                    <Button onClick={reset} className={styles.reset} type="primary">重置</Button>
                </div>
            </div>
            {buttonData.map(data => (
                <Button key={data.id} onClick={() => { isShowClick(data, data.done) }} className={styles.btnCenter} type="primary" style={data.changColor ? { borderColor: 'rgba(111, 252, 51, 1)', color: 'rgba(111, 252, 51, 1)' } : { borderColor: 'rgba(54, 153, 255, 1)', color: 'rgba(54, 153, 255, 1)' }} ghost>
                    {data.done ? data.nameCurrent : data.Unselected} {data.done ? <PauseOutlined /> : <CaretRightOutlined />}
                </Button>
            ))}
        </div>
    )
}

export default Index

.overall {
  position: relative;
  width: 1000px;
  height: 880px;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: pink;
  overflow: hidden;
}

.head {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  //   background: linear-gradient(0deg, rgba(27, 71, 143, .9) 0%, rgba(21, 31, 45, .9) 100%);
  border-radius: 4px;
  position: absolute;
  top: 100px;

  .reset {
    display: flex;
    align-items: center;
    position: absolute;
    width: 90px;
    height: 38px;
    background: #3699FF;
    font-size: 22px;
    color: #fff;
    font-weight: 500;
    border-radius: 4px;
    right: 0;
    margin-right: 20px;
  }
}



.btnCenter {
  display: flex;
  align-items: center;
  margin: 238px 40px 0 auto;
  width: 124px;
  height: 28px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 18px;
  cursor: pointer !important;
}