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>