2016-04-28 9 views
1

私が作成しているフォームのキープレスイベントへの反応ルータのリンクを追加したいと思います。フォーム自体は次のようになります:キープレスイベントへのリンクの追加

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

を動作するはず

+0

ルーターをコンポーネントコンテキストに追加しようとしましたが、this.context.router.push( 'yourpath')を使用しましたか? – QoP

+0

どうすればいいのでしょうか、私はリアストルーターを使い始めたばかりなので、これが何を意味するのかちょっと混乱します。 – BeeNag

答えて

1

お時間を

感謝

import { browserHistory } from 'react-router' 

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

ボタンプレスにはうってつけですが、残念なことにキープレスイベントの愛はまだありません。イベントはまだまったく発射されていないようです。私はそれを呼んでいる方法で問題があると思いますか? – BeeNag

+0

hm ... divにフォーカスがないためイベントが発生していないので、componentDidMountのウィンドウでバインドしてcomponentWillUnmountを使用してバインドを解除してください。 – QoP

+0

ウィンドウイベントへのバインドが追加されたが、まだ起動されていません... – BeeNag

関連する問題