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