react组件显示隐藏切换效果

最新推荐文章于 2023-09-25 19:54:12 发布

置顶爱吃水煮鱼~

最新推荐文章于 2023-09-25 19:54:12 发布

阅读量1.1w

点赞数 7

分类专栏： react 文章标签： react antd 显示隐藏

本文链接：https://blog.csdn.net/qq_41763076/article/details/90269141

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这段时间开始接触react,之前陆续五个月的vue开发,考虑公司项目日益庞大,决定后期使用react
作为小小白,也是在不断学习成长,还望老司机勿喷

constructor函数:

constructor(props) {
   super(props)
   this.clickSubmit = this.clickSubmit.bind(this)
   // 默认Alert隐藏
   this.state = { 
	  visible:  false 
   }
}

clickSubmit事件:

clickSubmit(e) {
    e.preventDefault()
    if (判断条件) {
		 // Alert隐藏
	     this.setState({ visible: false }) 
	 } else {
	 	 // Alert显示
	     this.setState({ visible: true })
	 }
}

render函数:

// 使用三目运算,Alert和Button组件引用的是蚂蚁金服的Ant Design
<div>
	{this.state.visible ? (
		<Alert message="用户名或密码错误" type="warning" showIcon /> 
	) : null}
</div>
<Button type="primary" htmlType="submit" id="loginBtn" onClick={this.clickSubmit}>Login</Button>