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>