文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

react怎么隐藏按钮

2023-05-14 21:48

关注

react怎么隐藏按钮

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react怎么隐藏按钮?

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

1、实现效果

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

5c7805f41cec60e2c91bc861f2014fe.jpg

8936dd31e8a62e579fd25bc2f91785f.jpg

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 }}>    {}
                    <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>
                {}
                <div style={{ background: '#fff', paddingTop: '10px' }}>
                    <Row>
                        <Col span={23}>
                        </Col>
                        <Col span={1} onClick={this.display_name.bind(this)}> {}
                            <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的取值,状态机一旦改变页面便会立即加载,即控制按钮的呈现与隐藏

以上就是react怎么隐藏按钮的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 资料下载
  • 历年真题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯