あるコンポーネントのインターバル機能を別のコンポーネントからクリアする方法はありますか？

Question

親コンポーネント

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')); 
}, 

Answer 1

ローカル変数を使用する代わりに、windowオブジェクトを使用してみてください。

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

次に、あなたはあなたではなくwindowオブジェクトを使用したくない場合、これを実現するための他の方法はもちろんあります

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

あなたのログアウト機能から、それをクリアすることができます。しかしこれは最短/最も簡単な方法でなければなりません。

---

シンプルなデモは、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>