forEachループの状態を変更します

Question

ボタンのクリックイベントの状態を変更するにはどうすればよいですか？今、私はエラー

捕捉されない例外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 
     }); 
     }) 
    }); 
    }