react.js的事件
我的笔记里对react.js的学习包含了以下8个内容：
- import react.js
- JSX
- 渲染
- Components and props
- react 生命周期
- 事件处理 (This note)
- 条件渲染 if-else
- 列表渲染 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
})
}
}
Top comments (0)