通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。让我们看看它是如何运作的。

案例说明:

两个子组件都可以输入薪资,单位分别是人民币(CNY)和美金(USD). 其中一个被输入,同时会被换算(汇率按照6.65)成另一个币种显示换算后的结果. 两个组件输入的值会相互影响. 同时外部组件会根据薪资判断是否是”有钱人”.
在这里两个子组件的input值都是分别被另一个子组件共享的,所以这个值我们把它提升到父级组件. 通过对父级组件的修改,从而影响另一个组件的输入. 这个就是input.value的状态提升.
b.gif
image.png

代码部分:

  1. class Salary extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.handleChange = this.handleChange.bind(this);
  5.   }
  6.   handleChange(e) {
  7.     this.props.onChange(e.target.value);
  8.   }
  9.   render() {
  10.     return (
  11.       <div>
  12.         <fieldset>
  13.           <legend>薪资{this.props.cType}:</legend>
  14.           <input   onChange={this.handleChange} value={this.props.cValue||''}/> 
  15.           {this.props.cTypeIcon}
  16.         </fieldset>
  17.       </div>
  18.     );
  19.   }
  20. }
  22. class HelloWorld extends React.Component {
  23.   constructor(props){
  24.     super(props);
  25.     this.state = {
  26.       type: 'CNY',
  27.       salary: 0
  28.     },
  29.       this.reverse = this.reverse.bind(this);
  30.     this.handleCNYChange = this.handleCNYChange.bind(this);
  31.     this.handleUSDChange = this.handleUSDChange.bind(this);
  32.   }
  33.   componentDidUpdate(){
  34.     console.log(this.state);
  35.   }
  36.   reverse(type,salary){
  37.     // 费率
  38.     const C = 6.65;
  39.     var outValue = 0;
  40.     var inputValue = parseFloat(salary);
  41.     if(Number.isNaN(inputValue)){
  42.       return '';
  43.     }
  44.     // 转换成人民币
  45.     if(type == 'CNY'){
  46.       outValue = salary*C;
  47.     }else{
  48.       outValue = salary/C;
  49.     }
  50.     // 四舍五入 保留2位
  51.     var roundValue = Math.round(outValue*100)/100;
  52.     // 格式化
  53.     if(roundValue.toString().indexOf('.')==-1){
  54.       roundValue += '.00';
  55.     }else{
  56.       //小数部分
  57.       var  dotNumber = roundValue.toString().split('.')[1];
  58.       dotNumber = dotNumber.length==1? dotNumber+'0': dotNumber;
  59.       roundValue = roundValue.toString().split('.')[0]+'.'+dotNumber;
  60.     }
  61.     return roundValue;
  62.   }
  63.   // 人民币转换美元
  64.   handleCNYChange(salary){
  65.     this.setState({
  66.       type: 'CNY',
  67.       value: salary
  68.     })
  69.   }
  70.   handleUSDChange(salary){
  71.     this.setState({
  72.       type: 'USD',
  73.       value: salary
  74.     })
  75.   }
  76.   // 判断是否是高收入
  77.   areUOk(){
  78.     // 人民币高于1000算高收入
  79.     if(this.state.type == 'CNY'){
  80.       return this.state.value>1000;
  81.     }else{
  82.       return this.reverse('CNY',this.state.value)>1000;
  83.     }
  84.   }
  85.   render() {
  86.     var type = this.state.type; 
  87.     var value = this.state.value;
  88.     var CNY_value = type=='CNY'? value: this.reverse('CNY',value);
  89.     var USD_value = type=='USD'? value: this.reverse('USD',value);
  90.     return(
  91.       <div>
  92.         <Salary key="1" onChange={this.handleCNYChange} cValue={CNY_value} cType="人民币" cTypeIcon="￥"/>  
  93.         <Salary key="2" onChange={this.handleUSDChange} cValue={USD_value} cType="美元" cTypeIcon="＄"/>  
  94.         <p>{this.areUOk()?'您真是有钱人!':'你还需要加油啊!'}</p>
  95.       </div>
  97.     )
  98.   }
  99. }