import React, { Component } from 'react';class CountTag extends Component {constructor(props) {super(props)//与render函数的onClick绑定，必须绑定，不然js找不到这两个函数this.onClickAdd = this.onClickAdd.bind(this)this.onCLickReduce = this.onCLickReduce.bind(this)}onClickAdd(){}onCLickReduce(){}render() {return (<div>{/*与html的标签无异，定义两个按钮和点击函数，但还没有实现它，预定一个props.num让父组件传值*/}<button onClick={this.onClickAdd}>+</button><button onClick={this.onCLickReduce}>-</button>counter:{this.props.num}</div>
        )}
}
export default CountTag

import React, { Component } from 'react';class CountTag extends Component {constructor(props) {super(props)//与render函数的onClick绑定，必须绑定，不然js找不到这两个函数this.onClickAdd = this.onClickAdd.bind(this)this.onCLickReduce = this.onCLickReduce.bind(this)this.state = {initValue: 0}}//+ =>函数
    onClickAdd(){this.state.initValue++//设置statethis.setState({initValue:this.state.initValue})}//- => 函数
    onCLickReduce(){this.state.initValue--//设置statethis.setState({initValue: this.state.initValue})}render() {return (<div>{/*与html的标签无异，定义两个按钮和点击函数，但还没有实现它，预定一个props.num让父组件传值*/}<button onClick={this.onClickAdd}>+</button><button onClick={this.onCLickReduce}>-</button>counter: {this.state.initValue}</div>
        )}
}
export default CountTag

import React, { Component } from 'react';class CountTag extends Component {constructor(props) {super(props)//与render函数的onClick绑定，必须绑定，不然js找不到这两个函数this.onClickAdd = this.onClickAdd.bind(this)this.onCLickReduce = this.onCLickReduce.bind(this)this.state = {initValue: this.props.num}}//+ =>函数
    onClickAdd(){this.onUpdateFunc(true)}//- => 函数
    onCLickReduce(){this.onUpdateFunc(false)}onUpdateFunc(flag){const previousValue = this.state.initValue//当点击+时flag为真，返回++，反之亦然const newValue = flag ? ++this.state.initValue : --this.state.initValuethis.setState({initValue: newValue})//这个函数作为一个props来传递数据，这里是最重要的this.props.updateCount(previousValue,newValue)}render() {return (<div style={style}>{/*与html的标签无异，定义两个按钮和点击函数，但还没有实现它，预定一个props.num让父组件传值*/}<button style={style} onClick={this.onClickAdd}>+</button><button style={style} onClick={this.onCLickReduce}>-</button>{/*countername表示第一个计数器，num表示父组件给的初值，并把这个初始值赋给当前组件的state*/}{this.props.countername} counter: {this.state.initValue}</div>
        )}
}
const style = {margin: '16px'
}
export default CountTag