[英]“this.setState is not a function” when using setState inside a nested addEventListener function
我一生无法在我的react组件内部传递此TypeError。 我已经阅读了每个相关的线程,并实施了几乎所有建议的修复方法,但没有成功。
import React, { Component } from "react";
class Wave extends Component {
state = {
position: 44
};
changePosition = () => {
let parentDiv = document.getElementById('parentDiv');
//this.setState({position: 3})
parentDiv.addEventListener('click', function (e) {
let offset = this.getClientRects()[0];
alert(e.clientX - offset.left);
let xcord = e.clientX - offset.left;
this.setState({position: xcord})
}, false);
}
render() {
return (
<div id={"parentDiv"}>
<div id={"childDiv"} onClick={this.changePosition}>HI THERE!</div>
</div>
);
}
}
export default Wave;
我知道我在this
上下文中失去了React类,并尝试在组件构造函数内部绑定changePosition
方法,该方法似乎无效。 我还尝试在addEventListener函数末尾使用.bind(this)
-
changePosition = () => {
let parentDiv = document.getElementById('parentDiv');
//this.setState({position: 3})
parentDiv.addEventListener('click', function (e) {
let offset = this.getClientRects()[0];
alert(e.clientX - offset.left);
let xcord = e.clientX - offset.left;
this.setState({position: xcord})
}.bind(this), false);
}
但是,当我这样做时,以及尝试将addEventListener函数更改为箭头函数(e) => {
我TypeError: this.getClientRects is not a function
非常感激如何解决该错误,这对我一天的最后2-3个小时来说已是吃光了。 非常感谢你!
parentDiv.addEventListener('click', function (e) {
let offset = this.getClientRects()[0]; // this refers to parentDiv
}
将此更改为箭头功能以正确绑定this
parentDiv.addEventListener('click', (e) => {
let offset = parentDiv.getClientRects()[0]; // this refers to Wave component, so we use the actual div reference
alert(e.clientX - offset.left);
let xcord = e.clientX - offset.left;
this.setState({position: xcord}); // works fine
}, false);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.