2015-11-05 50 views
1

我得到使用下面的代碼無法讀取未定義的屬性「路由器」。使用React-Router重定向成功的ajax呼叫

this.transitionTo('home')正在竊聽,我猜這是因爲這種情況。我嘗試綁定ajax調用這個,它也沒有幫助。

有關如何簡單地重定向到'家'或'/'這個成功的Ajax調用後的任何想法?

我試過導航(transitionTo)和歷史(this.pushState)mixins。

編輯:在此期間,我發現了一個使用頁面刷新的黑客工作解決方案。在阿賈克斯.done部分:

history.pushState({},'','/') 
window.location.reload() 

代碼:

var Router = ReactRouter; 
var Route = ReactRouter.Route; 
var Routes = ReactRouter.Routes; 
var Navigation = ReactRouter.Navigation; 
var History = ReactRouter.History; 

var Login = React.createClass({ 

mixins: [ History ], 
mixins: [ Navigation ], 

getInitialState: function(){ 
    return{ 
     email: "", 
     password: "" 
    } 
}, 

submit: function(e){ 
    e.preventDefault() 

    var data = { 
     email: this.state.email, 
     password: this.state.password, 
    } 

    // Submit form via jQuery/AJAX 
    $.ajax({ 
     type: 'POST', 
     url: '/sessions', 
     data: data 
     }) 
     .done(function(data) { 
      App.logIn(data.email) 
      alert('login successful!') 
      this.transitionTo('home') 
      // this.history.pushState(null, '/home') 
      // this.pushState(null, '/home') 
     }) 
     .fail(function(data) { 
      alert('No Such Email or Incorrect Password') 
     }); 
}, 

handleEmailChange: function(event) { 
    this.setState({email: event.target.value}); 
}, 

handlePasswordChange: function(event) { 
    this.setState({password: event.target.value}); 
},  

render: function(){ 
    return(
     <div> 
      Login To Your Account 
      <br/> 
      <form onSubmit={this.submit} > 
       Email: <input label="Email:" onChange={this.handleEmailChange} /> 
       <br/> 
       Password: <input label="Password:" type="password" onChange={this.handlePasswordChange} /> 
       <button type="submit">Submit</button> 
      </form> 
     </div> 
    ) 
} 
}) 

回答

0

你的情況下在內部函數變化。解決這個問題的最簡單方法是將var _this = this放置在外部函數中,然後在回調中使用_this.transitionTo