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>