RCT003 React event binding
Tags: react
Published: 2020-11-29 01:28:41

# 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()`：
```javascript
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内写箭头函数

```javascript
// 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内写箭头函数

```javascript
// 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
    })
  }
}
```