React实现自定义双向数据流

ng是双向数据流、VM双向数据绑定。而react与vue都是单向数据流，model层的数据流向view层。今天，我们就尝试自定义实现双向数据流。

案例：
组件中通过监听input内容变化，进而赋值。

class Bar extends React.Component {
	constructor(){
		super();
		this.state = {
			msg:''
		}
	}
	// input的内容变化赋值msg
	handleChange(event){
		this.setState({
			msg:event.target.value
		})
	}
	render(){
		let {msg} = this.state
		return(
			<div>
				// 监听input内容的变化
				<input onChange={this.handleChange.bind(this)}	type="text" />
				<p>输入的内容是：{msg}</p>
			</div>
		)
	}
}

ReactDOM.render(
	<Bar />,
	document.getElementById('app')
)

上个案例实现组件内部的双向数据流。
以下案例实现组件外部的双向数据流：

class App extends React.Component {
	constructor(){
		super();
		this.state = {
			msg:''
		}
	}
	// 获取到子组件传来的value，赋值到msg
	getValue(value){
		this.setState({
			msg:value
		})
	}
	render(){
		let {msg} = this.state
		return(
			<div>
				<Bar getValue={this.getValue.bind(this)} />
				<p>我是子组件input输入的内容：{msg}</p>
			</div>
		)
	}
}
class Bar extends React.Component {
	// input的内容变化调用父组件的getValue方法传值到父组件
	handleChange(event){
		this.props.getValue(event.target.value)
	}
	render(){
		return(
			<div>
				// 监听input内容的变化
				<input onChange={this.handleChange.bind(this)}	type="text" />
			</div>
		)
	}
}

ReactDOM.render(
	<App />,
	document.getElementById('app')
)