react怎麼隱藏按鈕

react隱藏按鈕的實作方法：1、利用狀態機設定「display_name」；2、將控制項按鈕放在div中呈現；3、透過修改狀態機「display_name」的取值，來控制按鈕的呈現與隱藏即可。

本教學操作環境：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>    {/* 通过状态机display_name获取diaplay取值 */}
                    <row>
                        <col>
                        
                        <col>
                            <div>
                                <span><button>详情</button> </span>
                                <span><button>添加</button></span>
                                <span><button>修改</button></span>
                                <span><button>删除</button></span>
                                <span><button>查看关联</button></span>
                            </div>
                        
                    </row>
                </div>
                {/* 通过icon实现编辑图标 */}
                <div>
                    <row>
                        <col>
                        
                        <col> {/* 通过display_name函数来改变状态机display_name的值来改变display取值 */}
                            <icon></icon>
                        
                    </row>
                </div>
                {/* 页面内容 */}
                <layout>
                    <content>
                        {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中文網其他相關文章！