«this.setState не является функцией» при использовании setState внутри вложенной функции addEventListener - PullRequest
Новая
       7

«this.setState не является функцией» при использовании setState внутри вложенной функции addEventListener

0 голосов
/ 10 февраля 2019

Я за всю свою жизнь не могу передать эту ошибку 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 внутри конструктора компонента, который, похоже, не работал.Я также попытался использовать .bind(this) в конце функции addEventListener - 

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 часа моего дня.Большое спасибо!

1 Ответ

0 голосов
/ 10 февраля 2019 
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);
...