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' )
            ); 

 

　　官方文档参考地址： http://www.css88.com/react/docs/lifting-state-up.html

 

查看更多关于React中的状态提升的详细内容...