React之ref属性

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

1.字符串形式

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

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

const Item = React.createClass({
			
			render(){
				return <div>
						<input ref = {function(dom){dom.focus();}} />
						<button onClick = {this.click}>click me!</button>
					</div>
			}
		});
  
       
        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 <div>
						<input ref = {function(dom){dom.focus();console.log('ref function');}} />
						<input ref = 'myinput' />
						<input ref = 'myinput2' />
						<button onClick = {this.click}>click me!</button>
					</div>
			}
		});
  
        ReactDOM.render(<Item/>,document.getElementById('example'));

 React v16.3 引入的 React.createRef()

this.myRef = React.createRef(); this.myRef 写在哪个DOM元素上，该DOM元素的实例就会赋值给this.myRef.current

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}