export default class App extends React.Component {
state = {
expand: flase,
renList: [],
}
handleCheck = value => {
const { expand, renList } = this.state
this.setState({ expand: !expand })
renList.push(value)
}
render() {
return (
<div>
{list.map(subItem => (
<div>
<div
className={`${css.sunKind} ${
this.state.expand === true ? css.active : null
}`}
onClick={() => this.handleCheck(subItem)}
>
{subItem.name}
</div>
</div>
))}
</div>
)
}
}after rendering the content, if you want to click on one of them, it will be selected, then add the class name active to the setting you click, and add it to renList, and then click again to remove the selected state and remove it from renList, similar to the effect of checkbox multi-selection. Now it is somewhat confusing, how do you need to modify it? Thank you very much!