react入坑之共享状态提升

 
 

  
  
考虑下面的需求，页面上有两个输入框，用来输入货币数量，一个输入美元，一个输入人民币，还有一行提示文字例如：“我们有1美元，也就是6.9元”；要求两个输入框随意输入一个，另一个输入框会根据汇率自动显示转换后的货币数量，并且下方提示文字也跟随变化。

  
  
通常情况下，我们会编写一个用于输入货币数量的组件，然后在页面上放两个这样的组件：
 
 
const exchangeRate = 6.9339
const currency = {
  '$': '美元',
  '￥': '人民币'
}
class CurrencyInput extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      value: ''
    }
    this.changeHandler = this.changeHandler.bind(this)
  }
  render () {
    return(
      <div>
        <label>
          {currency[this.props.currency]}：
          <input value={this.state.value} onChange={this.changeHandler}/>
        </label>
      </div>
    )
  }
  changeHandler (e) {
    this.setState({
      value: e.target.value
    })
  }
}
class App extends React.Component {
  constructor (props) {
    super(props)
  }
  render () {
    return(
      <div>
        <CurrencyInput currency={'$'}/>
        <CurrencyInput currency={'￥'} />
        <p>我们有{}美元，也就是{}元</p>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

  
  

   
   
在上面的代码中我们将货币种类通过props传递给输入框组件，分别显示了美元和人名币的输入框。然后在输入框组件内部，我们使用了上一节的“受控组件”技术，将输入框的值交由组件的state控制。但并没有完成需求——两个输入框并不同步，同时组件外部也不知道组件中到底填了什么值所以下面的提示语句也没有更新。

   
   

    
    
很多时候，若干组件需要隐射同一个变化的状态。我们推荐将共享的状态提升至它们最近的共同的祖先上。
   
   

   
   
就像官方推荐的那样，这时我们就需要用到共享状态提升技术：我们要将两个货币输入框组件共享的“数量”状态，提升到它们最近的祖先组件上，也就是App组件上。
  
  

// ...省略的代码
class CurrencyInput extends React.Component {
  constructor (props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }
  render () {
    return(
      <div>
        <label>
          {CURRENCY[this.props.currency]}：
          <input value={this.props.value} onChange={this.handleChange}/> // 需要传递额外参数的情况下只能再包一层
        </label>
      </div>
    )
  }
  handleChange (e) {
    this.props.onValueChange(e.target.value, this.props.currency) // 父级传递进来的回调函数
  }
}

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = { // 将共享状态存放在祖先元素上
      dollar: '',
      yuan: ''
    }
    this.valueChangeHandler = this.valueChangeHandler.bind(this)
  }
  render () {
    return( // 通过props向下传递共享状态和回调函数，很多情况下子组件共享的状态父级也需要用到
      <div>
        <CurrencyInput value={this.state.dollar} currency={'$'} onValueChange={this.valueChangeHandler}/>
        <CurrencyInput value={this.state.yuan} currency={'￥'} onValueChange={this.valueChangeHandler}/>
        <p>我们有{this.state.dollar}美元，也就是{this.state.yuan}元</p>
      </div>
    )
  }
  valueChangeHandler (value, type) {
    this.setState({
      dollar: type === '$' ? value : this.exchange(value, type),
      yuan: type === '￥' ? value : this.exchange(value, type)
    })
  }
  exchange (value, type) {
    return value * (type === '$' ? EXCHANGERATE : 1 / EXCHANGERATE)
  }
}
// ... 省略的代码