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 
     
                    
      
{text}
                    
                          
     
            }        }        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 
     
                    
                          
                      
     
            }        }        ReactDOM.render(                
     ,                document.getElementById('main')            );

 

　　官方文档参考地址：