React 函数式组件：实现点击按钮切换 active 状态

import { Button } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';

const Index = () => {
  const [btnList, setBtnList] = useState([
    {
      active: true,
      id: 1,
      content: '通用安全基线',
    },
    {
      active: false,
      id: 2,
      content: '共有云安全基线',
    },
    {
      active: false,
      id: 3,
      content: '软件平台安全基线',
    },
    {
      active: false,
      id: 4,
      content: '其他基线',
    },
  ]);

  const handleButtonClick = (id) => {
    const updatedBtnList = btnList.map((item) => {
      if (item.id === id) {
        return { ...item, active: true };
      } else {
        return { ...item, active: false };
      }
    });
    setBtnList(updatedBtnList);
  };

  return (
    <div className={styles.securityCenter}>
      <h4 className={styles.title}>已发布基线</h4>
      <div className={styles.btnList}>
        {btnList.map((item) => {
          return (
            <Button
              key={item.id}
              shape='round'
              onClick={() => handleButtonClick(item.id)}
              className={item.active ? styles.activeButton : ''}
            >
              {item.content}
            </Button>
          );
        })}
      </div>
    </div>
  );
};

export default Index;