React中的状态提升
React的状态提升就是用户对子组件操作，子组件不改变自己的状态，通过自己的props把这个操作改变的数据传递给父组件，改变父组件的状态，从而改变受父组件控制的所有子组件的状态，这也是React单项数据流的特性决定的。官方的原话是：共享 state(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。 这被称为“状态提升(Lifting State Up)”。
现在有个需求，有两个输入框，分别用来输入美元和人民币的数额，要求不管用户输入美元还是人民币，另一个输入框显示出根据汇率计算出的对应的数额。
每个组件的state是自己特有的，不能传递给其他组件，其他组件也无法更改。但是我们可以把input中值的显示控制权交给input的父组件，即把用户输入的数值通过props传递给它的父亲组件，在更新父组件的状态后，把这个值再传递给input，做个显示就可以了。
class Dollar extends React.Component{constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);}handleChange(event) {this.props.dollarChange(event.target.value); //将子组件的值通过props传给父组件}render() {const money = this.props.money;const yuan = this.props.yuan;const text = this.props.type == 'd' ? '美元' : '人民币';return <fieldset><legend>{text}</legend><input value={money} onChange={this.handleChange}/> </fieldset>}}class Box extends React.Component{constructor(props){super(props);this.state = {dollar: '',yuan: '',};this.dollarInput = this.dollarInput.bind(this);this.yuanInput = this.yuanInput.bind(this);}dollarInput(value) {if (parseFloat(value) || value == '' || parseFloat(value) == 0) {this.setState({dollar: value,yuan: value == '' ? '' : value * 6.7951});} else {alert('输入值必须为数字。');}}yuanInput(value) {if (parseFloat(value) || value == '' || parseFloat(value) == 0) {this.setState({dollar: value == '' ? '' : value * 0.1472,yuan: value,});} else {alert('输入值必须为数字。');}}render() {return <div><Dollar type = {'d'} dollarChange = {this.dollarInput} money = {this.state.dollar}/><Dollar type = {'y'} dollarChange = {this.yuanInput} money = {this.state.yuan}/></div>}}ReactDOM.render(<Box />,document.getElementById('main'));