react如何隐藏按钮

今天小编给大家分享一下react如何隐藏按钮的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联制作网站网页找三站合一网站制作公司,专注于网页设计,成都网站制作、成都做网站、外贸营销网站建设,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为上千家服务,创新互联网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!

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

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 (
           
               {/* 一行：按钮 */}
               
    {/* 通过状态机display_name获取diaplay取值 */}
                   
                       
                       
                       
                           

                               详情 
                               添加
                               修改
                               删除
                               查看关联
                           

                       
                   
               

               {/* 通过icon实现编辑图标 */}
               

                   
                       
                       
                        {/* 通过display_name函数来改变状态机display_name的值来改变display取值 */}
                           
                       
                   
               

               {/* 页面内容 */}
               
                   
                       {this.props.children}
                   
               
           
       );
   }
}
export default Index;

• display属性可以控制内容的呈现与隐藏，none表示隐藏，block表示呈现

• 第一步：利用状态机设置display_name

• 第二步：控件按钮放在div中进行呈现，div内容的呈现与否通过display实现，display具体取值取状态机中的display_name

• 第三步：给编辑图标添加单击事件：修改状态机display_name的取值，状态机一旦改变页面便会立即加载，即控制按钮的呈现与隐藏

以上就是“react如何隐藏按钮”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。