Ajout d'un lien à un événement de presse de touche

Question

Je souhaite ajouter un lien de routeur de réaction à un événement de presse de touche sous une forme que je crée. La forme elle-même ressemble à ceci:

<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> 

Comme vous pouvez le voir, je fais le bouton matériau ui un lien vers la page suivante. Cependant, je voudrais aussi faire quelque chose de similaire quand on appuie sur la touche Entrée pour soumettre le formulaire. En ce moment j'ai ceci à gérer l'événement clé et la connexion:

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

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

Mais comme vous pouvez le voir, il n'y a pas de transition se produisant dans la fonction appuyer sur la touche.

Ma question est comment puis-je ajouter ceci à l'événement de presse de touche afin qu'il provoque également une transition vers la page suivante?

Toute aide serait très appréciée, comme toujours.

Merci pour votre temps

Answer 1

Cela devrait fonctionner

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


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

Si vous utilisez React Router 2.0.0+ et vous avez importé browserHistory de réagir-routeur que votre historique routeur, vous pouvez utiliser aussi bien

import { browserHistory } from 'react-router' 

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