zoukankan      html  css  js  c++  java
  • react中如何实现一个按钮的动态隐藏和显示(有效和失效)

    初始准备工作

    constructor(props) {
        super(props);
        /*
        * 构建导出数据的初始参数,结合用户下拉选择后动态设置参数值
        * */
        this.state = {
          btnStatus: false,
          dateStart: '',
          dateEnd: '',
          currentType: 2,
        };
      }

    中间核心操作逻辑:在下拉菜单改变的时候触发一次设置操作:

    props:{
                onChange: (value)=>{
                  console.log('value',value);
                  if(value !== '-1'){
                    this.setState({btnStatus: true});
                  }else if(value === '-1'){
                    this.setState({btnStatus: false});
                  }
                }
              }

    界面组件展示区域:

    <a href="/assets/templatefile/XXX.xlsx" style={{float: 'right',paddingRight: '20px'}}>
                        {this.state.btnStatus===false ? <Button type="button" disabled className="ant-btn-primary ant-btn-lg"><span>批量导出</span></Button>
                        : <Button type="button" className="ant-btn-primary ant-btn-lg"><span>批量导出</span></Button>}
                      </a>
  • 相关阅读:
    3.4
    3.3 TensorFlow运行模型 ------- 会话
    3.2 TensorFlow数据模型 ---- 张量
    3.1 TensorFlow计算模型 --- 计算图
    寻找两个有序数组的中位数
    最长子串
    vector的遍历删除
    超时空大决战
    面经七
    面经五
  • 原文地址:https://www.cnblogs.com/zxyun/p/7771018.html
Copyright © 2011-2022 走看看