react中如何实现一个按钮的动态隐藏和显示(有效和失效)
2024-08-28 18:10:42
初始准备工作
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>
最新文章
- log4net的使用
- 10分钟学习pandas
- Codeforces Round #267 (Div. 2)
- 冰球项目日志4-yjw
- C# PDFBox 解析PDF文件
- Java基础-事件处理
- latex公式中的空格如何表示
- phonegap Overview
- ZOJ1221 &;&; UVA567:Risk(Floyd)
- [C++]memcpy 小记
- tomcat动态映射路径
- margin 等高布局
- 一个小知识点强引用__strong 弱引用__weak
- Node.js之事件监听和发送
- idea,mybatis读取配置文件报错:Could not find resource configuration.xml
- Mac下安装最新版本的Graphviz
- three.js 微信小游戏
- 【Linux】处理数据文件
- nginx配置:location配置方法及实例
- Alaya Webdav Server 0.0.10 发布
热门文章
- ajax当有返回值时
- How To Use The Repository Pattern In Laravel
- RabbitMQ持久化和非持久化
- Word 有哪些神奇的功能?
- linux中清理旧内核
- mysql中Numeric类型和int类型的区别
- Codeforces - 2019年11月补题汇总
- CF1174B Ehab Is an Odd Person(排序+结论)
- Java基础系列 - 查找数组的最大值和最小值
- M有SQL删除数据库提示Error dropping database (can&#39;t rmdir &#39;./db_test&#39;, errno: 39)