如何清除另一個組件的間隔功能？

父組件如何清除另一個組件的間隔功能？

handleSubmitValidateInput: function(e){ 
    e.preventDefault(); 
    var data = {phone: this._phone.value, pwd: this._pwd.value} 
    $.ajax({ 
     type: 'POST', 
     data:data, 
     url: 'http://localhost:3000/login', 
     success: function(data){ 
      ReactDOM.render(<Home UserDetails={data}/>, document.getElementById('content')); 
      var idleTime = 0; 
      var interval = setInterval(function(){ 
         // some code 
       }); 
      }, (1000)); 
     }, 
     error: function(error){ 
      console.log('Error login!!'); 
     } 
    }); 
},

我想從首頁組件清除interval。我怎樣才能做到這一點？請向我解釋這一點。下面的功能是主頁組件。我想清除註銷功能的時間間隔。

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

來源

2016-10-03 Mr_Perfect

而不是使用本地變量，請嘗試使用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> 
 
    \t <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>

來源

2016-10-03 11:48:04 Chris

如何清除另一個組件的間隔功能？

回答

相關問題