添加指向按键事件的链接

Question

我想在我正在创建的表单中将 react-router 链接添加到按键事件。表单本身如下所示：

<div className="col-md-6 col-md-offset-3" onKeyPress={e => this._handleKeyPress(e)}>
    <Paper style={styles.form}>
        <form role="form">
            <div className="text-center">
                <h2>Enter Your Details to Login</h2>
                <div className="col-md-12">
                    <TextField
                        hintText="Email"
                        floatingLabelText="Email"
                        type="email"
                        errorText={this.state.email_error_text}
                        onChange={e => this.changeValue(e, 'email')}
                        onBlur={this.isDisabled} 
                    />
                </div>
                <div className="col-md-12">
                    <TextField
                        hintText="Password"
                        floatingLabelText="Password"
                        type="password"
                        errorText={this.state.password_error_text}
                        onChange={e => this.changeValue(e, 'password')}
                        onBlur={this.isDisabled} 
                    />
                </div>
                <FlatButton
                    containerElement={<Link to="/portal" />}
                    disabled={this.state.disabled}
                    style={{"marginTop": 50}}
                    label="Submit"
                    onClick={e => this.login(e)} 
                />
            </div>
        </form>
    </Paper>
</div>

如您所见，我正在将 material-ui 按钮设置为指向下一页的链接。但是，当按下回车键提交表单时，我也想做类似的事情。目前我有这个来处理关键事件和登录：

_handleKeyPress(e) {
    if (e.key === 'Enter') {
        if (!this.state.disabled) {
            this.login(e);
        }
    }
}

login(e) {
    createUser(this.state.email, this.state.password);
}

但正如您所见，按键功能中没有发生转换。

我的问题是如何将它添加到按键事件中，以便它也会导致转换到下一页？

我们将一如既往地非常感谢任何帮助。

感谢您的宝贵时间

Answer 1

这应该可以工作

YourComponent.contextTypes = {
    router: React.PropTypes.object
};


login(e) {
    createUser(this.state.email, this.state.password);
    this.context.router.push('yourURL');
}

如果您使用 React Router 2.0.0+ 并且您从 react-router 导入 browserHistory 作为您的路由器历史记录，您也可以使用它

import { browserHistory } from 'react-router'

login(e) {
    createUser(this.state.email, this.state.password);
    browserHistory.push('yourURL');
}