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

最新推荐文章于 2024-09-01 08:06:01 发布

置顶

只如初见0706

最新推荐文章于 2024-09-01 08:06:01 发布

阅读量3.3w

点赞数 2

分类专栏： react 文章标签： react 控件隐藏 display

本文链接：https://blog.csdn.net/zrcj0706/article/details/79579325

版权

本文介绍如何在React应用中通过display属性来控制控件按钮的显示与隐藏，详细阐述了实现过程，包括利用状态机设置display_name，以及在编辑图标单击事件中切换display_name来达到动态显示和隐藏的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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() {

最低0.47元/天解锁文章