将 link 添加到按键事件

Question

我想将反应路由器 Link 添加到我正在创建的表单中的按键事件。表单本身如下所示：

<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 按钮设为 link 到下一页。但是，当按下回车键提交表单时，我也想做类似的事情。目前我有这个来处理关键事件和登录：

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

将 link 添加到按键事件

Adding a link to a key press event

reactjs

react-router

keyevent

material-ui