把下面代码改成类式组件点击对应Button改变active的值：import Button Result Typography Card from antd;import React useState from react;import styles from indexless;import CustomButton from componentsCustomButton;const I

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

class Index extends React.Component { constructor(props) { super(props); this.state = { btnList: [ { active: true, id: 1, content: "通用安全基线", }, { active: false, id: 2, content: "共有云安全基线", }, { active: false, id: 3, content: "软件平台安全基线", }, { active: false, id: 4, content: "其他基线", }, ], }; }

handleClick = (id) => { const updatedBtnList = this.state.btnList.map((item) => { if (item.id === id) { return { ...item, active: true, }; } else { return { ...item, active: false, }; } }); this.setState({ btnList: updatedBtnList }); };

render() { return (

已发布基线

{this.state.btnList.map((item) => { return ( <Button key={item.id} shape="round" onClick={() => this.handleClick(item.id)} > {item.content} ); })}

); } }

export default Index;