Status in ForEach Schleife ändern

Question

Wie kann ich den Status bei Klickereignis auf den Schaltflächen ändern? Jetzt habe ich Fehler

Uncaught Typeerror: this.setState ist keine Funktion

Ich weiß, dass ich hier nicht verwenden können this.setState aber ich kann nicht verstehen, wo soll ich binden machen

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

Ihr Click-Handler ist auf die Schaltfläche beschränkt, nicht auf die Klasse. Versuchen Sie stattdessen:

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