私が作成しているフォームのキープレスイベントへの反応ルータのリンクを追加したいと思います。フォーム自体は次のようになります:キープレスイベントへのリンクの追加
<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);
}
しかし、あなたは、キー押下機能で発生した一切の遷移はありません見ることができるよう:現時点では私は、これはキーイベントとログインを処理する必要があります。
私の質問は、キープレスイベントにこれを追加して、次のページにも移行する方法を教えてください。
いつものように、どんな助力も非常に高く評価されます。あなたにもこれを使用することができますが、ルータに反応使用している2.0.0+と、あなたのルーター履歴として反応し、ルータからbrowserHistoryをインポートした場合はこれが
YourComponent.contextTypes = {
router: React.PropTypes.object
};
login(e) {
createUser(this.state.email, this.state.password);
this.context.router.push('yourURL');
}
を動作するはず
ルーターをコンポーネントコンテキストに追加しようとしましたが、this.context.router.push( 'yourpath')を使用しましたか? – QoP
どうすればいいのでしょうか、私はリアストルーターを使い始めたばかりなので、これが何を意味するのかちょっと混乱します。 – BeeNag