React 类式组件：使用按钮改变 active 状态

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;