(相关资料图)

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

react怎么隐藏按钮？

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 (            <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中文网其它相关文章！

推荐内容