react怎么隐藏按钮

藏色散人
Lepaskan: 2023-01-05 10:58:34
asal
2277 人浏览过

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

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 (
            
                {/* 一行:按钮 */}
                
    {/* 通过状态机display_name获取diaplay取值 */}                                                                                                                             
                                                                                                                                                                                                  
                                             
                
                {/* 通过icon实现编辑图标 */}                 
                                                                                                {/* 通过display_name函数来改变状态机display_name的值来改变display取值 */}                                                                                            
                {/* 页面内容 */}                                                               {this.props.children}                                                   
        );     } } export default Index;
Salin selepas log masuk
  • display属性可以控制内容的呈现与隐藏,none表示隐藏,block表示呈现
  • 第一步:利用状态机设置display_name
  • 第二步:控件按钮放在div中进行呈现,div内容的呈现与否通过display实现,display具体取值取状态机中的display_name
  • 第三步:给编辑图标添加单击事件:修改状态机display_name的取值,状态机一旦改变页面便会立即加载,即控制按钮的呈现与隐藏

推荐学习:《react视频教程



以上是react怎么隐藏按钮的详细内容。更多信息请关注PHP中文网其他相关文章!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!