Question

我正在使用以下代码无法读取未定义的属性'router'。

this.transitionTo（'home'）正在窃听，我猜它是因为这个背景。我尝试将ajax调用绑定到此，它也没有帮助。

关于如何在成功进行ajax调用后简单地重定向到'home'或'/'的任何想法？

我已尝试过Navigation（transitionTo）和History（this.pushState）mixins。

编辑：与此同时，我找到了一个使用页面刷新的hacky工作解决方案。在ajax .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>
    )
}
})

Answer 1

您的上下文正在改变内部函数。解决此问题的最简单方法是将var _this = this放在外部函数中，然后在回调函数中使用_this.transitionTo。

使用React-Router重定向成功的ajax调用

1 个答案: