Javascript 单击“反应”按钮，启动和停止功能（方法）

有一个烦人的问题，我想知道是否有人能透露一些信息

我为我的react应用程序创建了一个自动路由的功能…但我正在尝试将一个按钮附加到此功能，以确保它在单击按钮时启动和停止。但是，当我尝试下面的代码时……什么都没有发生

class App extends React.Component {
  constructor (props) {
  super(props);
  this.state = { tabControl: true };
  this.handleClick = this.handleClick.bind(this);
  this.tabControl = this.tabControl.bind(this);
}

tabControl(props){
    RoutePaths(this.props);
}
handleClick() {
    this.setState(function (prevState, props){
      return { tabControl: !prevState.tabControl }
  });

}

render() {

return (
    <div className="clearfix" id="topContent">
          <Sidebar />
          <div className="white-bg" id="page-wrapper">
              <Header tagline="Welcome to JuDGE" />

             <button className="AutoTab" onClick={this.handleClick}>
                Toggle
              </button>

........

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={tabControl:true}；
this.handleClick=this.handleClick.bind（this）；
this.tabControl=this.tabControl.bind（this）；
}
tabControl（道具）{
路径路径（这是道具）；
}
handleClick（）{
this.setState（函数（prevState、props）{
返回{tabControl:！prevState.tabControl}
});
}
render（）{
返回(
切换
........

但是当我尝试第二个代码时，tabing函数会在单击按钮时启动，但当然不会在再次单击按钮时停止

 class App extends React.Component {

 constructor (props) {
  super(props);
  this.state = { tabControl: true };
  this.handleClick = this.handleClick.bind(this);
  this.tabControl = this.tabControl.bind(this);
}

 tabControl(props){
    RoutePaths(this.props);
 }


  handleClick() {
    this.setState(function (prevState, props){
      return { tabControl: !prevState.tabControl }
  });

 }

 render() {

 return (
    <div className="clearfix" id="topContent">
          <Sidebar />
          <div className="white-bg" id="page-wrapper">
              <Header tagline="Welcome to JuDGE" />

             <button className="AutoTab" onClick={this.tabControl}>
                Toggle
              </button>

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={tabControl:true}；
this.handleClick=this.handleClick.bind（this）；
this.tabControl=this.tabControl.bind（this）；
}
tabControl（道具）{
路径路径（这是道具）；
}
handleClick（）{
this.setState（函数（prevState、props）{
返回{tabControl:！prevState.tabControl}
});
}
render（）{
返回(
切换

尝试使用当前状态，而不是

设置状态中的可选回调：

handleClick() {
  this.setState({ tabControl: !this.state.tabControl });
}

我不确定我是否完全理解了您的意图，但在我看来，您忘记了一个条件。

你说如果你调用这个方法：

tabControl(props){
    RoutePaths(this.props);
 }

它可以工作，但不会停止

嗯，您不是有条件地运行它。

在这种方法中：

handleClick() {
    this.setState(function (prevState, props){
      return { tabControl: !prevState.tabControl }
  });

}

您正在设置
tabControl
状态。我想您在运行
tabControl（）
之前忘记检查它了

tabControl(props){
    const {tabControl} = this.state;
    tabControl && RoutePaths(this.props); // invoke of tabControl is true
 }

this.intervalId = setInterval(() => {...});

编辑

在看到您在评论中发布的
routePath
代码后：

function RoutePaths(props) {
    let pathUrls = ['/deploymentqueue', '/deploydb', '/currentstatus'];
    let paths = pathUrls.length;
    let index = 0;
    let interval = 3000;
    setInterval(() => {
        props.history.push(pathUrls[index]);
        index = (index + 1) % paths;
    }, interval);
} 

在我看来，您将遇到另一个问题。您需要从
setInterval
返回的间隔id来停止它，但您没有将其存储在任何位置。

引自：

…它返回唯一标识间隔的间隔ID，
因此，您可以稍后通过调用clearInterval（）将其删除

因此，您需要将其存储在某个位置，并使用
ID
调用
clearInterval

tabControl(props){
    const {tabControl} = this.state;
    tabControl && RoutePaths(this.props); // invoke of tabControl is true
 }

this.intervalId = setInterval(() => {...});

在你们班的其他地方：

clearInterval(this.interval);

编辑#2

作为您评论的后续内容，下面是interval与react的简单用法：


类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
滴答声：0
};
}
onStart=（）=>{
this.intervalId=setInterval（（）=>{
this.setState（{ticks:this.state.ticks+1}）
}, 500);
}
顶部=（）=>{
clearInterval（this.intervalId）
}
render（）{
const{ticks}=this.state；
返回(
开始
停止
{ticks}
);
}
}
ReactDOM.render（，document.getElementById（“根”）；
您尝试执行的操作不需要tabControl状态。但是，您需要在某个位置调用clearInterval。请将handleClick更改为类似以下内容：


handleClick（）{
//更改RoutePath以返回setInterval返回的id。
如果（此.routePathInterval）{
clearInterval（this.routePathInterval）；
this.routePathInterval=null；
}否则{
this.routePathInterval=RoutePath（this.props）；
}
}
RoutePath的定义是什么样子的？给你…函数RoutePath（props）{let pathURL=['/deploymentqueue'，'/deploydb'，'/currentstatus']；let path=pathURL.length；let index=0；let interval=3000；setInterval（（）=>{props.history.push（pathURL[index]）；index=（index+1）%path；}，间隔）；}module.exports=RoutePaths；
App
是否通过路由器连接或渲染？是否有错误？@Sag1v其通过路由器渲染。如果您在此处遇到其他问题，请参阅我的答案以了解更多详细信息谢谢您的详细回答。我更改了tabControl函数，正如您在上面所做的调整。但这不起作用，也不会产生任何错误。请转到cl如果我直接调用按钮onClick中的tabControl方法，那么我将尝试实现什么？它将启动设置间隔功能…但我正在尝试从上述按钮启动和停止设置间隔功能。至于您提到的设置间隔问题，请您详细说明。非常感谢您的帮助。我已经更新了我的用一个如何使用间隔的简单示例回答。您必须存储从
setInterval
返回的id，然后将其与
clearInterval
一起使用，以停止它。感谢您的帮助。您的代码确实使它开始和停止。我已经接受了您的答案，并感谢您的耐心。此外，我注意到开始和停止工作正常一次…并且不会再次重新启动。在本例中，在引入while循环中，对吗？它可能不会再次启动，因为this.intervalId仍将被分配给已清除的间隔的ID，并且if语句的计算结果为true。请再看一看我的回答ThanswerThank@Max。您的回答同样好。感谢您的支持耐心和帮助。嗨@Max，仔细看了你的答案后，它解决了我原来的问题，但也提供了一个保持间隔状态的想法。谢谢！嗨@Max…有没有机会分享clearinterval当前索引建议的示例？更新了我原来的答案。为了解决@Max提出的问题，我更改了我的
index=0
到
index=pathUrls.indexOf（this.props.location.pathname）
这允许react router始终跟踪我的路由所在位置