在 forEach 循环中更改状态答案

【问题标题】：Change state in forEach loop在 forEach 循环中更改状态
【发布时间】：2016-08-14 00:09:03
【问题描述】：

如何更改按钮点击事件的状态？现在我有错误

未捕获的 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
        });
      })
    });
  }

【问题讨论】：

这是按钮，console.log(this)
永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。
是的，你是对的。但是我怎样才能到达 Popup 并改变它的状态呢？

标签： javascript loops reactjs addeventlistener setstate

【解决方案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
        });
      })
    });
  }

【讨论】：

在这种情况下，我遇到了未捕获的类型错误：无法读取未定义的属性“setState”。所以这里 this 不是我的组件