Javascript 为什么'；这'；React类与Js事件处理程序中的不同？_Javascript_Reactjs

Javascript 为什么'；这'；React类与Js事件处理程序中的不同？

javascript reactjs

Javascript 为什么'；这'；React类与Js事件处理程序中的不同？,javascript,reactjs,Javascript,Reactjs,当我使用此代码时： html : <body> <button>Click me</button> <script type="module" src="1.js"></script> </body> JS : const btn = document.querySelector('button') class Events { constructor() {

当我使用此代码时：

html :  <body>
   <button>Click me</button>
   <script type="module" src="1.js"></script>
 </body>
JS : const btn = document.querySelector('button')
class Events {
 constructor() {
   console.log(this)
   btn.addEventListener('click', this.handleClick)
 }
 handleClick() {
   console.log(this)
 }
}
const event = new Events()

html：
点击我
JS:const btn=document.querySelector（'按钮'）
班级活动{
构造函数（）{
console.log（这个）
btn.addEventListener（'click'，this.handleClick）
}
handleClick（）{
console.log（这个）
}
}
常量事件=新事件（）

“this”=按钮元素

但当我在react中使用此代码时：

class Event extends Component {
  constructor(props) {
    super(props)

    this.state = {}
  }
  handleClick() {
    console.log(this)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    )
  }
}

类事件扩展组件{
建造师（道具）{
超级（道具）
this.state={}
}
handleClick（）{
console.log（这个）
}
render（）{
返回(
点击我
)
}
}

“this”=未定义

为什么javascript事件处理程序中的“this”与react事件处理程序不同？

因为react的合成事件系统不会调用将

this

设置为DOM元素的函数，而DOM会调用。这只是React事件处理的编写方式。而不是

yourHandler.call（thedomeElement，eventObject）

它只是执行

yourHandler（eventObject）

。你可以阅读更多关于它的内容。如果要访问DOM元素，请使用事件对象的

currentTarget

属性：

handleClick(event) {
    const element = event.currentTarget;
    // ...
}

这与DOM用于

this

的元素相同（同时也是DOM属性和React属性）。请注意，

currentTarget

和

target

不是一回事

target

可能是挂接事件的元素中的元素，但

currentTarget

将始终是挂接事件的元素

下一个问题可能是你该怎么办。这已经包括在内了。

尝试在构造函数中添加这个

this.handleClick=this.handleClick.bind（this）

谢谢，但实际上我知道所有的解决方案。我需要知道为什么“this”的工作方式不同？请尝试从您的第一个文件中的构造函数中删除

btn.addEventListener（'click'，this.handleClick）

，handleClick是否仍有

this

？这应该让你明白了，如果不是的话，我可以进入Depthal：注意上面问的问题是“为什么它不同？”而不是“我该怎么做？”