react系列（15）状态提升

水深无声 2021-09-16 22:56 269阅读 0赞

使用 react 经常会遇到几个组件需要共用一个状态的情况，这种情况可以使用状态提升。举个现实的例子，如汇率兑换，在人民币输入栏中输入金额，其他国家货币相应的兑换金额就换算出来了，其实它们用的是同一个状态数据：输入金额。解决办法：将这部分共享的状态数据提升至最近的共同父组件当中进行管理。

如下面Demo中，定义了一个子组件Dollar.jsx：代表汇率的输入框。定义了一个父组件Box.jsx：状态要至此级，用于实现汇率的计算及控制子组件的金额现实。

子组件Dollar.jsx

import React from 'react';
    
    class Dollar extends React.Component {
    	constructor(props) {
    		super(props);
    		console.log(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>
    	}
    }
    
    //导出组件
    export default Dollar;

父组件Box.jsx

import React from 'react';
    import Dollar from './Dollar.jsx';
    
    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} {...this.props}/>
                    <Dollar type = {'y'} dollarChange = {this.yuanInput} money = {this.state.yuan} {...this.props}/>
                </div>
            );
    	}
    }
    
    //导出组件
    export default Box;

渲染结果：输入10元时，美元输入框会自动显示兑换金额。

![20181107230525224.png][]

[20181107230525224.png]: /images/20210813/75f0ba800fd94a7b888b940b0ea54ca3.png