Изменение состояния в forEach loop

Question

Как изменить состояние события click на кнопках? Теперь у меня есть ошибка

неперехваченным TypeError: this.setState не является функцией

Я знаю, что я не могу использовать здесь this.setState, но я не могу понять, где я должен сделать привязку

class Popup extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = {opened: false}; 
    } 

    componentDidMount(){ 
    var popupOpenBtn = document.querySelectorAll('[data-popup]'); 

    popupOpenBtn.forEach(function(item) { 
     item.addEventListener("click", function(){ 
     this.setState({ 
      opened: true 
     }); 
     }) 
    }); 
    } 

Answer 1

Ваш обработчик кликов привязан к кнопке, а не к классу. Попробуйте вместо этого:

class Popup extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = {opened: false}; 
    } 

    componentDidMount(){ 
    var popupOpenBtn = document.querySelectorAll('[data-popup]'); 
    var component = this; 

    popupOpenBtn.forEach(function(item) { 
     item.addEventListener("click", function() { 
     component.setState({ 
      opened: true 
     }); 
     }) 
    }); 
    }