React 获取页面demo 之 ref

周大胖子

1.                                        
   
2.         // 使用之前 要传递参数e  
   
3.                                                
   
4.          // 监听input改变
   
5.     inpC(e){
   
6.         this.setState({
   
7.             inpValue:e.target.value
   
8.         })
   
9.         // console.log(e.target.value)
   
10.     }                                       
    
11.                                                
    
12.                                                
    
13.                                                
    
14.                                                
    
15.         // 使用ref之后         由于this.input 已经被指向当前input 所以这里 直接使用this.input 不需要再传递参数e
    
16.         inpC(){
    
17.         this.setState({
    
18.             inpValue:this.input.value
    
19.         })
    
20.     }       
    
21.        
    
22.         // 贴一下input 源码
    
23.          <input type = "text"
    
24.             value={this.state.inpValue}
    
25.             onChange ={this.inpC.bind(this)}
    
26.             // 这句话的意思是 this.input 指向的就是这个input 如果在div或者 ul 中皆可以使用
    
27.             ref={(input)=>{this.input = input}}
    
28.     />
    
29.                                                
    
30.                                                
    
31.         // 使用ref 会出现坑， ref 的 本质是获取页面demo ，所以对demo 的 操作 最好放在 setState的 回调函数中                                       
    
32.         this.setState({
    
33.                 a:1
    
34.         },()=>{
    
35.                 这是回调函数，因为setState是一个异步函数，在setState 之后执行
    
36.         })
    
37.                                                

复制代码