当我使用此代码时:
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()
“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>
)
}
}
“这个”=未定义 为什么 javascript 事件处理程序中的“this”与 React 事件处理程序不同？
最佳答案
因为 React 的合成事件系统不会在将 this 设置为 DOM 元素的情况下调用您的函数，而 DOM 会这样做。这就是 React 事件处理的编写方式。它只是执行yourHandler(eventObject)，而不是yourHandler.call(theDOMElement, eventObject)。您可以阅读更多相关信息here 。如果要访问 DOM 元素，请使用事件对象的 currentTarget 属性:
handleClick(event) {
const element = event.currentTarget;
// ...
}
这与 DOM 用于 this 的元素相同(并且既是 DOM 属性又是 React 属性)。请注意，currentTarget 和 target 不是同一件事； target 可能是您 Hook 事件的元素内的元素，但 currentTarget 将始终是您 Hook 事件的元素。
关于javascript - 为什么 React 类中的 'this' 与 Js 事件处理程序中的不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67032928/