Question

父组件

interval

我想清除主页组件中的handleLogout: function(e){ e.preventDefault(); console.log('Cleared'); localStorage.clear(); ReactDOM.render(<Login />, document.getElementById('content')); },。我怎样才能做到这一点？请向我解释一下。以下功能属于主页组件。我想从注销功能中清除间隔。

   <SpotfireControl id="c970da0f1b5549a88d27f368f6770f2f" />
<DIV id="showHidecontainer">
<TABLE style="WIDTH: 550.5pt" cellSpacing=0 cellPadding=0 width=751 border=0> 
<COLGROUP> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<TBODY> 
<TR style="HEIGHT: 15.75pt" height=21> 
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 240pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157> 
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Metric Selection</FONT></STRONG></P></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31></TD> 
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 118pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157> 
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Channel</FONT></STRONG></P></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31></TD> 
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 128pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157> 
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Trade Panel Selection</FONT></STRONG></P></TD> 


<TR style="HEIGHT: 15pt" height=20> 
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: windowtext; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><P><STRONG><U>Metric Selection:</U></STRONG></P>
<P><STRONG>Metric:</STRONG> <SpotfireControl id="96184134b79e4dd4a0fb06aba8af4442" /> </P>
<P><STRONG>Threshold: </STRONG><SpotfireControl id="0695ba526b4045a5ba87408ff3b508e3" /></P>
<P><STRONG>Plan Type: </STRONG><SpotfireControl id="b8617a4560804448823d6bd61bba9235" /></P></FONT></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><SpotfireControl id="8f9ef7c8a16d451889733e5d3d9f8a43" /></FONT></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><SpotfireControl id="1e977330ab2b4e1e94bfd62c710b11ef" /></FONT></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15.75pt" height=21> 
<TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15.75pt" height=21> 
<TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 


</TBODY></TABLE> </div>


$("#c970da0f1b5549a88d27f368f6770f2f").on('change',function(){
 $("option:selected",this).text()=="Show"?
  $("#showHidecontainer").fadeIn():
  $("#showHidecontainer").fadeOut()
})

Answer 1

请尝试使用window对象，而不是使用局部变量。

window.interval = setInterval(function(){
  // some code
});

然后您可以从退出功能中清除它

handleLogout: function(e){
  e.preventDefault();
  clearTimeout(window.timeout);
  console.log('Cleared');
  localStorage.clear();
  ReactDOM.render(<Login />, document.getElementById('content'));
},

如果您不想使用window对象，当然还有其他实现方法。这应该是最短/最简单的方式。

可以在here或下面的代码段中找到简单的演示。检查控制台输出。

var Start = React.createClass({
  start: function() {
    console.log("Timeout started")
    window.timeout = setTimeout(function(){
      console.log("Timeout ended")
    }, 2000);
  },
  render: function() {
    return <button onClick={this.start}>Set Timeout</button>;
  }
});

var Stop = React.createClass({
  stop: function() {
    clearTimeout(window.timeout);
    console.log("Timeout cleared");
  },
  render: function() {
    return <button onClick={this.stop}>Clear Timeout</button>;
  }
});

ReactDOM.render(
  <div>
  	<Start />
    <Stop />
  </div>,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

如何清除一个组件的间隔功能？

1 个答案: