原生js和js的区别jsbutton的点击事件_React事件处理中的this的指向问题
在React中对元素进⾏事件绑定时，事件名和绑定事件的⽅式和原⽣js绑定事件⼀样，直接在HTML上直接指定某个事件调⽤某个函数，不过有区别的事，对于事件函数的绑定，React⼜显得不⼀样，对于刚开始接触React的⼈来说，甚⾄有些难以理解。
<
从上⾯两段代码可以看出，⼤体还是相似的，不过第⼆段代码中隐藏的问题还是挺多的。
⾸先我们先看⼀段代码：
class
这段代码就是简单的点击按钮就打印出2，我们看下结果
正常打印出2，没有问题，那么我们稍微将代码修改下
class
点击按钮之后，将会让number+1，那么我们看下结果：
结果报错了，那么这是为啥呢，其实主要是onBtnClick函数⾥⾯⽤到了this，我们的⽬的是在点击的时候，通过调⽤当前实例中的setState ⽅法来更新number的值，但是⽬前组件已经被渲染成HTML元素了，整个元素处于window环境下，当我们点击时，⽅法内部的this已经指向window了，所以不存在setState和state了，⾃然就报错了。那么我们修改下onBtnClick，将值打印出来看下：
onBtnClick
可以看到第⼀个this指向window,2和3都是undefined，那么这种情况怎么处理呢，附上官⽹事件解决⽅案
React-事件处理
其中
这个写法是我觉得⾮常有意思的，通过在 class内部 使⽤赋值语句将⼀个箭头函数指向⼀个变量，这个是⼀个新的语法，通过这种⽅式声明的变量都会变成实例对象的属性，不会挂在原型上，同时⼜因为是箭头函数，在声明时就已经确定了this指向，所以该⽅法内部也不会报错，并且会按照我们的想法
进⾏操作。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。