javascript - 如何在 Reactjs 中停止 setTimeout onClick

Question

我是 Reactjs 的新手，在使用 setTimeOut 时，我陷入了停止它的最佳方式。我应该使用 clearTimeOut或 stopPropagation()。

这是我的代码

render: function() {
    return ( < div className = "colorClick"
      style = {
        {
          background: this.state.bgColor
        }
      }
      onClick = {
        this.detectColor
      } > < /div><br/ >
    );
  },
  calcTime: function() {
    var time = Math.floor((Math.random() * 9) + 1);
    this.setState({
      total_time: time
    }, () => {
      window.setTimeout(this.calcTime, 250)
    });
  },


  detectColor: function(event) {
    window.clearTimeout(this.state.total_time);
    window.clearTimeout(this.calcTime);
  },


  componentDidMount: function() {
    this.calcTime();
  },
  componentWillUnmount: function() {
    this.detectColor();
  }

在这段代码中，我使用了 clearTimeOut，但它不起作用。我希望在使用 className="colorClick" 单击 div 时使用它>，setimeOut 应该清除并重置。

Answer 1

您错误地使用了 clearTimeout。您需要将 window.setTimeout 的结果存储在一个变量中，然后以该变量作为参数调用 window.clearTimeout。这是来自 w3schools 的示例这表明了这一点。