在setInterval在componentDidMount中运行时，如何清除Interval onClick？

Question

我有一个标题，其标题的背景图像可以在单击后更改，也可以由于setInterval循环而更改。

setInterval每7秒更改一次图像，并在componentDidMount中定义。

当我单击按钮更改图像时，setInterval显然不在乎并保持运行状态，因此有时用户不能超过一秒钟欣赏新图像。

当我单击按钮时如何重置setInterval？我无法在函数handleClick（）中编写clearInterval（），因为无法访问setInterval。

Answer 1

只需使用this.interval将间隔保存到类变量中，以便您可以从任何地方访问。

class Header extends React.Component {
  componentDidMount(){
    this.interval = setInterval(nextImage, 7000);
  }

  handleClick = () => {
    clearInterval(this.interval);
    nextImage();
    this.interval = setInterval(nextImage, 7000);    
  }

  nextImage = () => {
    ...
  }

  render() {
    ...
  }
}