React 数据操控显示与隐藏 加上css3动画基础

周大胖子

1. import React , { Fragment, Component }from 'react';
   
2. 
   
3. 
   
4. class Myan extends Component{
   
5. 
   
6.     // 构造函数
   
7.     constructor(props)
   
8.     {
   
9.         super(props);
   
10. 
    
11.         this.state ={
    
12.             show:true
    
13.         }
    
14. 
    
15.         this.btnClick = this.btnClick.bind(this);
    
16.     }
    
17. 
    
18. 
    
19.     render ()
    
20.     {
    
21.         return <Fragment>
    
22.                 <div>
    
23.                     {/* 这句话的意思是 根据 this.state.show 的 值 改变clas，如果加上css3 则会产生动画效果 */}
    
24.                     <h1 className={this.state.show?'show':'hide'}> 我爱钟无艳 </h1>  
    
25.                     <button onClick={this.btnClick}> 点击说心里话 </button>   
    
26.                 </div>
    
27.             </Fragment>;
    
28.     }
    
29. 
    
30. 
    
31.     btnClick(){
    
32.         
    
33.         this.setState(()=>{
    
34.             if(this.state.show){
    
35.                 return {
    
36.                     show :false
    
37.                 }
    
38.             }else{
    
39.                 return {
    
40.                     show :true
    
41.                 }
    
42.             }
    
43.            
    
44.         })
    
45.     }
    
46. 
    
47. 
    
48. 
    
49. }
    
50. 
    
51. 
    
52. export default Myan;

复制代码