javascript - "this.setState is not a function"在嵌套的 addEventListener 函数中使用 setState 时

Question

我一生都无法在我的 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;

我知道我正在丢失 React 类 this 上下文，并尝试在组件构造函数内绑定(bind) 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不是一个函数

非常感谢有关如何解决此错误的任何启发，因为这已经占用了我一天中的最后 2-3 个小时。非常感谢!

Answer 1

parentDiv.addEventListener('click', function (e) {
    let offset = this.getClientRects()[0];  // this refers to parentDiv        
}

将其更改为箭头函数以正确绑定(bind)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);