谈react事件写法前,先梳理一下关于react的学习的思路。
和其他框架一样,react的学习依次要解决几个问题:
1.框架如何运行;
2.页面样式、事件、数据的写法;
3.组件----组建中数据、事件的写法,组件间的通讯(数据传递);
4.路由----页面的跳转
5.数据请求----ajax
6.数据的管理----全局的状态切换、数据的缓存
掌握事件写法的重要性不言而喻,以下梳理几种事件的写法,以及应用场景。
react中事件的写法,个人认为主要分为两大类,当然根据框架分离的思想,我们肯定主要使用第二种。
1.声明和调用都在render里:写法主要分为普通函数;箭头函数;带事件源。
2.函数的定义和调用分离:其中涉及到this指向问题,需要注意。=》解决:箭头函数;箭头函数带参数;箭头函数带事件源和参数;调用时bind改变指向;声明时bind改变指向。
废话不多说,直接上代码。每个按钮分别代表不同的方法执行结果,
import React, { Component } from 'react'
export default class Footer extends Component {
constructor(props) {
super(props);
this.state = {
num: 111
}
this.show8=this.show8.bind(this);
}
show4(){
alert("4号被点击");
// alert(this.state.num);这个会报错,因为this指向window,找不到state,undefined
}
show5=()=>{
alert(this.state.num)
}
show6=(cont)=>{
alert(cont);
}
show7=(cont,e)=>{
e.target.innerHTML=cont;
}
show8(){
alert(this.state.num);
}
show9(){
alert(this.state.num);
}
render() {
return (
<div className="footer">
我是底部{this.state.num}
//声明和调用在一起,这样代码不好看,也不适合复杂操作
<button onClick={function () { alert("666")}}>按钮1</button>
<button onClick={() => { alert("8888") }}>按钮2</button>
<button onClick={
(e) => {
e.target.innerHTML = "7777"
}}>按钮3</button>
//声明调用分离,this指向不对,要手动调整
<button onClick={
this.show4
}>按钮4</button>
<button onClick={this.show5}>按钮5</button>
<button onClick={
()=>{
this.show6("我是传的参数9999")
}
}>按钮6</button>
<button onClick={
(e)=>{
this.show7("点击变内容",e)
}
}>按钮7</button>
<button onClick={this.show8}>按钮8</button>
<button onClick={this.show9.bind(this)}>按钮9</button>
</div>
)
}
}