DEV Community

loading...

RCT003 React event binding

declair profile image Jihao ・2 min read

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'
})
Enter fullscreen mode Exit fullscreen mode

注意,不能够直接用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
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

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
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide