add sum of count

Author: mocheng

chapter-02/controlpanel_with_summary/src/ControlPanel.js

@@ -7,12 +7,32 @@ const style = {
 
 class ControlPanel extends Component {
 
+  constructor(props) {
+    super(props);
+
+    this.onCounterUpdate = this.onCounterUpdate.bind(this);
+
+    this.initValues = [ 0, 10, 20];
+
+    const initSum = this.initValues.reduce((a, b) => a+b, 0);
+    this.state = {
+      sum: initSum
+    };
+  }
+
+  onCounterUpdate(newValue, previousValue) {
+    const valueChange = newValue - previousValue;
+    this.setState({ sum: this.state.sum + valueChange});
+  }
+
   render() {
     return (
       <div style={style}>
-        <Counter caption="First" />
-        <Counter caption="Second" initValue={10} />
-        <Counter caption="Third" initValue={20} />
+        <Counter onUpdate={this.onCounterUpdate} caption="First" />
+        <Counter onUpdate={this.onCounterUpdate} caption="Second" initValue={this.initValues[1]} />
+        <Counter onUpdate={this.onCounterUpdate} caption="Third" initValue={this.initValues[2]} />
+        <hr/>
+        <div>Total Count: {this.state.sum}</div>
       </div>
     );
   }

chapter-02/controlpanel_with_summary/src/Counter.js

@@ -18,11 +18,19 @@ class Counter extends Component {
   }
 
   onClickIncrementButton() {
-    this.setState({count: this.state.count + 1});
+    this.updateCount(true);
   }
 
   onClickDecrementButton() {
-    this.setState({count: this.state.count - 1});
+    this.updateCount(false);
+  }
+
+  updateCount(isIncrement) {
+    const previousValue = this.state.count;
+    const newValue = isIncrement ? previousValue + 1 : previousValue - 1;
+
+    this.setState({count: newValue})
+    this.props.onUpdate(newValue, previousValue)
   }
 
   render() {
@@ -39,11 +47,13 @@ class Counter extends Component {
 
 Counter.propTypes = {
   caption: PropTypes.string.isRequired,
-  initValue: PropTypes.number
+  initValue: PropTypes.number,
+  onUpdate: PropTypes.func
 };
 
 Counter.defaultProps = {
-  initValue: 0
+  initValue: 0,
+  onUpdate: f => f //什么都不做的函数
 };
 
 export default Counter;