Javascript 在嵌套的addEventListener函数中使用setState时，“this.setState不是函数”

我一生都无法在react组件中传递此类型错误。我已经阅读了每一个相关的线程，并实施了几乎所有建议的修复，但都没有效果

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;

但是，当我这样做时，以及当我尝试将addEventListener函数更改为箭头函数e=>{时，我留下了TypeError：this.getClientRects不是一个函数

任何关于如何避免这个错误的启示都是非常感谢的，因为这已经占用了我一天的最后2-3个小时。非常感谢

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

将此更改为箭头函数以正确绑定此

---

使用parentDiv.getClientRects代替此..，使用arrow函数代替.bind以保持整洁。这很有效。非常感谢。

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

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);