React中的ref属性使用讲解

React中的ref作用是通过this.refs获得原生DOM对象

1.字符串形式

const Item = React.createClass({  
              
            click(){  
                this.refs.myinput.focus();  
            },  
              
            render(){  
                return <p>  
                        <input ref = 'myinput' />  
                        <button onClick = {this.click}>click me!</button>  
                    </p>  
            }  
        });  
    
         
        ReactDOM.render(<Item/>,document.getElementById('example'));  

2.函数形式：界面初始化后，自动执行。函数中的形参就是原生dom对象

const Item = React.createClass({  
              
            render(){  
                return <p>  
                        <input ref = {function(dom){dom.focus();}} />  
                        <button onClick = {this.click}>click me!</button>  
                    </p>  
            }  
        });  
    
         
        ReactDOM.render(<Item/>,document.getElementById('example'));  

3.函数形式比componentDidMount()中的先执行

控制台输出结果：

ref function

component did mount

const Item = React.createClass({  
              
            click(){  
                this.refs.myinput.focus();  
            },  
              
            componentDidMount(){  
                this.refs.myinput2.focus();  
                console.log('component did mount');  
            },  
              
            render(){  
                return <p>  
                        <input ref = {function(dom){dom.focus();console.log('ref function');}} />  
                        <input ref = 'myinput' />  
                        <input ref = 'myinput2' />  
                        <button onClick = {this.click}>click me!</button>  
                    </p>  
            }  
        });  
    
        ReactDOM.render(<Item/>,document.getElementById('example'));