• 技术文章 >web前端 >前端问答

    react怎么隐藏按钮

    藏色散人藏色散人2023-01-05 10:58:34原创115

    react隐藏按钮的实现方法:1、利用状态机设置“display_name”;2、将控件按钮放在div中进行呈现;3、通过修改状态机“display_name”的取值,来控制按钮的呈现与隐藏即可。

    本教程操作环境: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 }}>    {/* 通过状态机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的取值,状态机一旦改变页面便会立即加载,即控制按钮的呈现与隐藏

    推荐学习:《react视频教程



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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:react display
    上一篇:react native怎么隐藏组件 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react启动无法访问怎么办• react怎么让子组件不渲染• react 多个页面之间跳转怎么实现• react fetch怎么请求数据• react 表格怎么增加
    1/1

    PHP中文网