React学习：状态提升实例

所谓状态提升就是将各个子组件的公共state 提升到它们的父组件进行统一存储、处理（这就是所谓的”单一数据源“），然后再将父组件处理后的数据或函数props到各子组件中。

那么如果子组件要修改父组件的state该怎么办呢？我们的做法就是将父组件中负责setState的函数，以props的形式传给子组件，然后子组件在需要改变state时调用即可。

下面实例场景是我看官方文档后，自己编写。
具体请参考：官方文档：状态提升

下面场景和官方文档的温度转换场景道理相同：温度数值转换场景

下面开始我的场景，

例：
首先你要知道一个A物品为200元。
有两个input输入框，分别对应价钱和数量。

功能展示：
（1）当你在第一个输入框输入数字(例如：201)后，第二个输入框会自动显示你能买多少个物品，这里显示是 1个
这里写图片描述
（2）同理，当你在第二个输入框输入（例如：3）后，第一个输入框又会自动显示你需要多少钱（这里是：600），才能买3个物品。

（3）当然，当你在任意输入框输入的不是数字，另一输入框则什么都不会发生。
这里写图片描述

源代码：

function inputProtected(input){
    if(Number.isNaN(input) || input <= 0){
        return '';
    }else{
        return Math.floor(input).toString();
    }
}
let dataTitle = {
    m:'需要花多少钱：',
    n:'能买这么多个：'
};

class Calculation extends React.Component{
    render(){
        let data = this.props.data;
        let title = this.props.title;
        let changeDate = this.props.changeDate;       
        return (
            <div>
                <fieldset>
                    <legend>{title}</legend>
                    <input type="text" value={data} onChange={changeDate}/>    
                </fieldset>    
            </div>
        );
    }
}

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {type:'money',input:''};
    }
    handleDate(type,e){
        if(type === 'money'){
            this.setState({type:'money',input:e.target.value});
        }else if(type === 'number'){
            this.setState({type:'number',input:e.target.value});
        }
    }
    convertNumber(input){
        return Math.floor(input/200);
    }
    convertMoney(input){
        return input * 200;
    }
    render(){
        let input = this.state.input;
        let type = this.state.type;
        let number = type==='money'  ? inputProtected(this.convertNumber.bind(this,input)()) : input;
        let money  = type==='number' ? inputProtected(this.convertMoney.bind(this,input)()) : input;
        return (
            <div>
                <h4>价格：200元一个</h4>
                <Calculation
                    data={money}
                    title={dataTitle.m}
                    changeDate={(e)=>this.handleDate('money',e)}
                />
                <Calculation
                    data={number}
                    title={dataTitle.n}
                    changeDate={(e)=>this.handleDate('number',e)}
                />
            </div>
        );
    }
}
ReactDOM.render(<App/>,document.getElementById('root'));

React学习：状态提升 实例

猜你喜欢

React学习：状态提升实例