react点击事件控制div盒子的显示隐藏

index.jsx

import React, { Component } from 'react';

class show extends Component {
    constructor(props) {
        super(props)
        this.state = {
            cls: 'parent_kb'
        }
    }
    changeCls(cls) {
        this.setState({
            cls: cls
        })
    }
    componentDidMount() {
        this.changeCls('parent_xs')
    }
    render() {
        const { cls } = this.state
        return (
            <div className={`show_hide ${cls}`}>
                <h3>这是类组件</h3>
                <div className='kb'>空白</div>
                <div className='bd'>表单</div>
                <div className='xs'>显示</div>
            </div>
        );
    }
}

export default show;

 style

.show_hide{
    width: 500px;
    margin: 0 auto;