RCT003 React event binding

react.js的事件

我的笔记里对react.js的学习包含了以下8个内容：

1. import react.js
2. JSX
3. 渲染
4. Components and props
5. react 生命周期
6. 事件处理 (This note)
7. 条件渲染 if-else
8. 列表渲染 for loop

需求

我们的组件中有一个<button>标签，点击这个button后，我们需要执行一个javascript函数，函数中的内容可以是向后端发送请求，可以是改变组件的state，也可以同时都有。

这里的组件都是通过继承React.Component编写的。

修改组件的state

之前有讲过，react组件一旦渲染，就不能更改，除非再次通过render渲染。

我们如果要修改组件的state，那么可以调用this.setState()：

this.setState({
  virus: 'COVID-19',
  startYear: 2019,
  level: 'pandemic'
})

注意，不能够直接用this.state.xxx = xxx，因为这样并不会调用render()函数。

4种绑定事件的方式

• class内写箭头函数 （推荐）
• JSX内写箭头函数 （推荐）
• constructor内通过bind绑定
• JSX内通过bind绑定

以上方法的核心就是让事件执行的函数能够通过this访问到component自己。

这里展示前两种方式的代码（点击'Add age'可以增加年龄，点击'Change Skill'可以改变‘正蹬’、‘鞭腿’等的顺序）。

class内写箭头函数

// define arrow functions in class
class Baoguo extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      skill1: '正蹬',
      skill2: '鞭腿',
      skill3: '刺拳',
      age: 69,
      item: '耗子尾汁',
      virtue: '武德'
    }
  }
  render() {
    // on mounting the component
    return <div className="raw-text">
    <p>我说小伙子你不讲武德，你不懂。(他说) 马老师，对不 对不起，我不懂规矩，啊我是 他说他是乱打的。</p>
    <p>他可不是乱打的啊，{this.state.skill1}、{this.state.skill2}、{this.state.skill3}，训练有素。</p>
    <p>后来他说他练过 三四年泰拳。啊，看来是 有bear来。</p>
    <p>这两个 年轻人不讲武德，来骗，来偷袭！我{this.state.age}岁的 老同志。这好吗？这不好。我劝 这位 年轻人，{this.state.item}，好好反思。</p>
    <p>以后不要再犯 这样的聪明，小聪明 啊！额...武林 要以和为贵，要讲{this.state.virtue}。 不要搞 窝里斗。</p>
    <p>谢谢朋友们！</p>
    <button onClick={this.addAge}>Add Age</button>
    <button onClick={this.changeSkill}>Change Skill</button>
  </div>;
  }

  addAge=()=>{
    var currentAge = this.state.age
    currentAge = currentAge + 1
    this.setState({
      age: currentAge
    })
  }

  changeSkill=()=>{
    var tempSkill = this.state.skill1
    this.setState({
      skill1: this.state.skill2,
      skill2: this.state.skill3,
      skill3: tempSkill
    })
  }
}

JSX内写箭头函数

// use arrow functions in JSX
class Baoguo extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      skill1: '正蹬',
      skill2: '鞭腿',
      skill3: '刺拳',
      age: 69,
      item: '耗子尾汁',
      virtue: '武德'
    }
  }

  render() {
    // on mounting the component
    return <div className="raw-text">
    <p>我说小伙子你不讲武德，你不懂。(他说) 马老师，对不 对不起，我不懂规矩，啊我是 他说他是乱打的。</p>
    <p>他可不是乱打的啊，{this.state.skill1}、{this.state.skill2}、{this.state.skill3}，训练有素。</p>
    <p>后来他说他练过 三四年泰拳。啊，看来是 有bear来。</p>
    <p>这两个 年轻人不讲武德，来骗，来偷袭！我{this.state.age}岁的 老同志。这好吗？这不好。我劝 这位 年轻人，{this.state.item}，好好反思。</p>
    <p>以后不要再犯 这样的聪明，小聪明 啊！额...武林 要以和为贵，要讲{this.state.virtue}。 不要搞 窝里斗。</p>
    <p>谢谢朋友们！</p>
    <button onClick={()=>this.addAge(1)}>Add Age</button>
    <button onClick={()=>this.changeSkill()}>Change Skill</button>
  </div>;
  }

  addAge(inc) {
    var currentAge = this.state.age
    currentAge = currentAge + inc
    this.setState({
      age: currentAge
    })
  }

  changeSkill() {
    var tempSkill = this.state.skill1
    this.setState({
      skill1: this.state.skill2,
      skill2: this.state.skill3,
      skill3: tempSkill
    })
  }
}