vote案例引出事件绑定

学了些基础今天简单做一个投票计数器

class Vote extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      y: 0,
      n: 0
    }
  }
  render() {
    let {title} = this.props
    let {y, n} = this.state
    return (
      <div className="box" style={{width: '200px',border: '1px solid black', margin : 'auto', textAlign: 'center'}}>
        <div className="header" style={{borderBottom: '1px solid black'}}>{title}</div>
        <div className="body">
          <p>支持人数：{y}</p>
          <p>反对人数：{n}</p>
          <p>当前总票数：{y + n}</p>
        </div>
        <div className="footer" style={{borderTop: '1px solid black'}}>
          <button onClick={this.add}>支持</button> &nbsp;&nbsp;
          <button onClick={this.sub.bind(this)}>反对</button>
        </div>
      </div>
    );
  }
//在创建方法时，做好使用箭头函数进行创建，因为普通创建函数的方法，方法里的this为undefined
  add = () => {
    this.setState({y: this.state.y + 1})
  }
  sub = () => {
    this.setState({n: this.state.n + 1})
  }
}
 // 或者你可以选择使用bind调用方法调用方法，将this替换
  sub(e) {
    this.setState({n: this.state.n + 1})
  }

总结：时间绑定主要分两种方式。一是将方法写成箭头函数，调用时直接this.方法名进行调用；二是用普通方式创建方法，但是调用时使用this.方法名.bind(this)对创建方法里的this进行替换。