Widersprüchliche Veranstaltungen: onKeyPress & onClick

Question

Ich habe ein aus wie folgt aus:

Mit dem folgenden Code:

<form onKeyPress={this.login.bind(this)}> 
    <input type="text" placeholder="username"/> 
    <input type="password" placeholder="password"/> 
    <button type="button" onClick={this.login.bind(this)}>Log In</button> 
</form> 

Während ich habe die login() Methode wie unten:

login(e){ 
    if((e.type==='keypress' && e.which===13) || e.type==='click'){   
      //Do login operations: 
      this.props.store.login()//the method inside MobX store 
    } 
} 

In folgenden Szenarien gibt es keine Fehler und ich kann l ogin:

1. ich auf der mit Maus login Schaltfläche klicken
2. I Enter drücken, während der Login-Button
konzentriert NICHT ist

Aber die folgende dritte Szenario gibt mir Fehler aufgrund der Login Operationen werden zweimal aufgerufen:

3. Wenn ich drücke Geben Sie während der Login-Taste IS focu sed

(zB Login-Button drücken Registerkarte Taste fokussiert ist) Ich frage mich, was die beste Praxis ist, durch die ich die Fehler der dritten Szenario zu vermeiden. Ich habe andere verwandte SO-Fragen durchgesehen, aber ich konnte die beste Vorgehensweise nicht herausfinden.

---

Ich habe vergessen zu erwähnen, dass ich ReactJS mit MobX verwende.

Answer 1

das Problem gelöst durch onKeyPress Attribut von <form> Tag bewegen, um Text-Typ <input> tags:

<form> 
    <input type="text" placeholder="username" onKeyPress={this.login.bind(this)}/> 
    <input type="password" placeholder="password" onKeyPress={this.login.bind(this)}/> 
    <button type="button" onClick={this.login.bind(this)}>Log In</button> 
</form> 

Answer 2

Sie könnten auch das onSubmit Ereignis verwenden, wenn es Ihren Anwendungsfall paßt besser:

Beispiel (JS Bin)

class App extends Component { 
    login = (e) => { 
    e.preventDefault(); 
    console.log('login'); 
    } 
    render() { 
    return (
     <form onSubmit={this.login}> 
     <input type="text" placeholder="username" /> 
     <input type="password" placeholder="password" /> 
     <button type="submit">Log In</button> 
     </form> 
    ); 
    } 
}