javascript - 冲突事件 : onKeyPress & onClick

Question

我有一个这样的:

使用以下代码:

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

虽然我有如下的 login() 方法:

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

在以下情况下，没有错误，我可以登录:

1. 我用鼠标单击登录按钮
2. 我在登录按钮未聚焦时按 Enter

但是下面的第三种情况，由于登录操作被调用两次而给我带来了错误:

当我在登录按钮处于焦点状态时按 Enter 时(例如，通过按 tab 键来焦点登录按钮)

我想知道可以避免第三种情况的错误的最佳实践是什么。我查看了其他相关的 SO 问题，但找不到最佳实践。

---

我忘了提及我正在将 ReactJS 与 MobX 结合使用。

Answer 1

通过移动 onKeyPress 解决了问题来自 <form> 的属性标记为文本类型<input>标签:

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