react 学习 - 2. ref

在 react 中，虚拟 DOM 节点的获取是通过 ref 来获取的。

<input value={this.state.value} 
	   onChange={this.changeInput.bind(this)} 
	   ref={(input)=>{this.input=input}} />

changeInput(e) {
	console.log(e.target === this.input) // true
	let value = this.input.value
	this.setState(_=>{
		return {
			value
		}
	})
} 

但是 react 不推荐直接操作 ref 来改变视图，因为 react 中 setState 是异步执行，在页面渲染之前是不太好操作 DOM的。

在父组件调用子组件 ref

class MyInput extends Component {
	constructor(props){
		super(props)
	}
	render() {
		return <input ref={props.inputRef} />
	}
}

class Parent extends Coponent {
	render() {
		return (
			<div>
				<MyInput inputRef={ el => this.inputElement = el } />
				<button onClick={this.focusChildrenInput.bind(this)} >聚焦</button>
			</div>
		)
	}
	focusChildrenInput(){
		this.inputElement.focus()
	}
}