React中通过点击事件添加样式

本文通过对元素的显示和消失为例

在初始化阶段定义dispaly的属性值

constructor(props, context) {
    
    
        super(props, context);
        this.state = {
    
    
            display_block: 'block', 
            display_none:'none'
        }
    }

​ 在元素上添加点击事件Onclick

<span onClick={
    
    this.del.bind(this)} style={
    
    {
    
     display: this.state.display_block }}>编辑</span>

​ 设置点击函数

del = () =>{
    
    
        if (this.state.display_block === 'none') {
    
    
            this.setState({
    
    
                display_block: 'block',
                display_none:'none'
            })
        }
        else if (this.state.display_block === 'block') {
    
    
            this.setState({
    
    
                display_block: 'none',
                display_none:'block'
            })

        }
    }