index代码
import React , { Component } from 'react';
class View extends Component {
constructor(props){
super(props);
this.state = {
bTrue:'edu show'
}
}
edit(e){
this.setState({
bTrue:'edu edit'
})
}
save(e){
//保存
this.setState({
bTrue:'edu show2'
})
}
render(){
return(
<div class={this.state.bTrue}>
<input type="button" onClick={(e)=>this.edit(e)} value="添加"/>
<h3>教育培训</h3>
<div class="jiahao" onClick={(e)=>this.edit(e)}>这是加号</div>
<div class="xianshi">这是显示<input type="button" onClick={(e)=>this.edit(e)} value="修改"/></div>
<div class="biaodan">这是表单
<input type="button" onClick={(e)=>this.save(e)} value="保存"/></div>
</div>
)
}
}
export default View;
//css代码
.edu {
//模块都隐藏
.jiahao,.xianshi,.biaodan{
display:none;
}
// 如果第一次是加号
&.show .jiahao{
display:block;
}
// 如果第一次是显示 或保存后显示
&.show2 .xianshi{
display:block;
}
// 添加或编辑
&.edit .biaodan{
display:block;
}
}
控制div的显示与隐藏从而代替判断时候的隐藏
更改state里面设置的类名来达到控制每一个元素的显示与隐藏
