React中通过diaplay实现控件按钮的呈现与隐藏
2018-03-16 11:41
525 查看
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 ( <Layout> {/* 一行:按钮 */} <div style={{ background: '#fff', paddingTop: '20px', display: this.state.display_name }}> {/* 通过状态机display_name获取diaplay取值 */} <Row> <Col span={12}> </Col> <Col span={12}> <div style={{ float: 'right' }}> <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">详情</Button> </span> <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">添加</Button></span> <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">修改</Button></span> <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large" >删除</Button></span> <span style={{ paddingLeft: '5px', paddingRight: '10px' }}><Button style={buttoncolor} size="large">查看关联</Button></span> </div> </Col> </Row> </div> {/* 通过icon实现编辑图标 */} <div style={{ background: '#fff', paddingTop: '10px' }}> <Row> <Col span={23}> </Col> <Col span={1} onClick={this.display_name.bind(this)}> {/* 通过display_name函数来改变状态机display_name的值来改变display取值 */} <Icon type='edit' style={{ fontSize: '30px' }} /> </Col> </Row> </div> {/* 页面内容 */} <Layout style={{ padding: '10px 0', background: '#fff' }}> <Content style={{ padding: '0 24px', minHeight: 280 }}> {this.props.children} </Content> </Layout> </Layout> ); } } 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
相关文章推荐
- [原创]将数据绑定至页面的两个Textbox控件上,并且可以通过按钮实现分页
- [置顶] react页面获取url中输入的值并呈现(通过doit函数实现)
- dskinlite(uieasy mfc界面库)使用记录3:绘制动态元素(按钮控件通过隐藏方式修改图片显示)
- android webview 实现放大缩小,隐藏按钮控件
- 通过js选择按钮实现一个内容隐藏另一个内容显示
- 怎样隐藏uploadify上传控件的按钮,然后通过其它控件的事项来触发uploadify控件的文件浏览窗口并现实文件上传功能
- 怎样隐藏uploadify上传控件的按钮,然后通过其它控件的事项来触发uploadify控件的文件浏览窗口并现实文件上传功能
- 通过按钮控件实现MDI新建子窗口
- 制作login.jsp页面,要求实现提供用户登陆的界面, 用户通过该界面输入用户名(控件名userName)和密码(控件名password), 然后点击“登录”按钮实现登陆操作.
- dskinlite(uieasy mfc界面库)使用记录3:绘制动态元素(按钮控件通过隐藏方式修改图片显示)
- Android 点击按钮实现控件显示隐藏
- 在页面中,我们经常看到,一个button按钮,如果属标点击,就会触发一个窗口的显示,如果二次点击并可以隐藏,那么如何通过JAVA配合html来实现这一功能呢?
- 通过按钮控件实现MDI新建子窗口(MFC自动生成的视图、文档、子框架共用)
- 利用隐藏按钮和ajax控件实现aspxGridviewajax效果
- 由 图标 加 文字 实现 按钮功能 的 图标按钮用户控件
- 返回页面顶部top按钮通过锚点实现(自写)
- 自己通过坐标转化,实现的一个按钮。绘图绘制的
- 通过js实现2个select控件的交换数据
- Labview学习笔记——如何用按钮来控制某控件(例如文本控件)的显示与隐藏
- 创建一个如下的窗体,并在窗体上放置colorDialog控件。实现功能:1)程序运行时,单击打开颜色对话框按钮,可选择颜色,并以所选颜色作为窗体背景色