class MyCtrl extends React.Component{
  constructor (props) {
    super(props);
    this.UpdateOwnCount = this.UpdateOwnCount.bind(this);
    const initValues = [0, 10, 20];
    const getSum = (total, currentValue) => {
      return total + currentValue;//为什么要写 return ？因为只有一条语句，而且该语句已经结尾了。否则就去掉return和{}
    }
    const initSum = initValues.reduce(getSum, 0);
    this.state = {
      sum: initSum,
    }
  }
  UpdateOwnCount(oldValue, newValue){
    const valueChange = newValue - oldValue;
    this.setState({sum: this.state.sum + valueChange})
  }
  render () {
    return(
        <ul>
          <Steps setUpdate={this.UpdateOwnCount} initCount={0}></Steps>
          <Steps setUpdate={this.UpdateOwnCount} initCount={10}></Steps>
          <Steps setUpdate={this.UpdateOwnCount} initCount={20}></Steps>
          总和是：{this.state.sum}
        </ul>
    )
  }
}

class Steps extends React.Component{
  constructor (props) {
    super(props);
    this.DecrementClickButton = this.DecrementClickButton.bind(this);
    this.IncrementClickButton = this.IncrementClickButton.bind(this);
    this.state = {
      count: this.props.initCount | 0,
    }
  }
  tryCalculate(isIncrement){
    const oldValue = this.state.count;
    const newValue = isIncrement ? oldValue + 1 : oldValue - 1;
    this.setState({count: newValue})
    //最关键一步，使用外部函数，同时把赋完值的参数，传递进去
    this.props.setUpdate(oldValue, newValue);
  }
  DecrementClickButton(isIncrement){
    return this.tryCalculate(isIncrement = false)
  }
  IncrementClickButton(isIncrement){
    return this.tryCalculate(isIncrement = true)
  }
  render () {
    return(
        <li>
          <button onClick={this.DecrementClickButton}>-</button>
          <button onClick={this.IncrementClickButton}>+</button>
          数字是：{this.state.count}
        </li>
    )
  }
}