react组件显示隐藏切换效果
这段时间开始接触react,之前陆续五个月的vue开发,考虑公司项目日益庞大,决定后期使用react作为小小白,也是在不断学习成长,还望老司机勿喷
·
这段时间开始接触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>
更多推荐
已为社区贡献1条内容
所有评论(0)