开发者学堂课程【React 入门与实战：在 React 中为按钮绑定点击事件2】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8116
在 React 中为按钮绑定点击事件2
目录：
二、各案例详解
二、各案例详解
新建一个测试项目:
命名为箭头函数 .html
< !DOCTYPE html>
Document按钮< /button>
</span></code></div><div><code><span class="lake-fontsize-1515">onload = function() {<br />const btn = document . getElementById( 'btn ' )<br />console.log(this)</span></code></div><div><span class="lake-fontsize-1515">
//</span><span class="lake-fontsize-1515">
在这里打印 <span>this </span>
里面是谁就打印谁</span></div><div><code><span class="lake-fontsize-1515">btn.onclick = function(){<br />
//this.style.backgroundColor =</span></code><code><span class="lake-fontsize-1515">’<span>red '</span></span></code></div><div><span class="lake-fontsize-1515">
//</span><span class="lake-fontsize-1515">
实现鼠标点击后背景变红功能
</span></div><div><span class="lake-fontsize-1515">
//</span><span class="lake-fontsize-1515">实现功能后注释掉<br /></span><code><span class="lake-fontsize-1515"><span>setTimeout(() => {</span></span></code></div><div><span class="lake-fontsize-1515"><span>
//</span>在点击事件里加一个延时器<br /></span><code><span class="lake-fontsize-1515"><span>this. style. backgroundColor ='red'</span></span></code></div><div><span class="lake-fontsize-1515">
//</span><span class="lake-fontsize-1515">直接使用是不行的因为在 <span>setTimeout </span>里 <span>this </span>永远指向 <span>window</span>。</span></div><div><span class="lake-fontsize-1515">
因此改造成箭头函数。箭头函数就是一个普通的匿名函数，只不过 <span>this </span>的指向比较特殊一些。
<br /></span><code><span class="lake-fontsize-1515"><span>}, 1000)</span></span></code></div><div><span class="lake-fontsize-1515"><span>
//</span>加定时函数<span>,</span>实现点击鼠标后背景一秒钟后变红
<br /></span><code><span class="lake-fontsize-1515"><span>}<br />}<br />
this. show('传参') }>按钮
//事件的处理函数，需要定义为一个箭头函数，然后赋值给函数名称show = (arg1) => {
console.1og( ' show方法' + arg1)
}
//箭头函数本身是一个匿名函数，触发 onClick 后调用箭头函数。先定义一个 function 在赋值给 show 调用。
这样在触发的点击事件后就可以根据 show 这个函数名来调用这个箭头函数。这是最标准的写法，也是最不易出错的。
在箭头函数里写方法调用，在将箭头函数赋值给一个具体的函数名。
