React中通过diaplay实现控件按钮的呈现与隐藏

1、实现效果

• 通过单击编辑图标实现页面中对应按钮的呈现与隐藏、
• 效果图如下

2、代码实现

import React, { Component } from 'react';
import '../../../style_css/antd.css';
import { Layout,Icon,Row, Col} from 'antd';
class Index extends Component {
    // 状态机
    constructor(props, context) {
        super(props, context);
        this.state = {
            display_name: 'none', //此状态机为display的取值
        }
    }
    display_name() { //编辑按钮的单击事件，修改状态机display_name的取值
        if (this.state.display_name == 'none') {
            this.setState({
                display_name: 'block',
            })
        }
        else if (this.state.display_name == 'block') {
            this.setState({
                display_name: 'none',
            })

        }
    }
    render() {
        return (
            
                {/* 一行：按钮 */}
                
    {/* 通过状态机display_name获取diaplay取值 */}
                    
                        
                        
                        
                            

                                详情 
                                添加
                                修改
                                删除
                                查看关联
                            
                        
                    
                
                {/* 通过icon实现编辑图标 */}
                

                    
                        
                        
                         {/* 通过display_name函数来改变状态机display_name的值来改变display取值 */}
                            
                        
                    
                
                {/* 页面内容 */}
                
                    
                        {this.props.children}
                    
                
            
        );
    }
}
export default Index;

• display属性可以控制内容的呈现与隐藏，none表示隐藏，block表示呈现
• 第一步：利用状态机设置display_name
• 第二步：控件按钮放在div中进行呈现，div内容的呈现与否通过display实现，display具体取值取状态机中的display_name
• 第三步：给编辑图标添加单击事件：修改状态机display_name的取值，状态机一旦改变页面便会立即加载，即控制按钮的呈现与小时

3、通过栅格化实现类似效果，详情见：

http://blog.csdn.net/zrcj0706/article/details/79061942