在 Reactjs 中多次按下 enter 时停止触发按钮/功能答案

【问题标题】：Stop a button/function from triggering when pressing enter multiple times in Reactjs在 Reactjs 中多次按下 enter 时停止触发按钮/功能
【发布时间】：2018-04-06 10:11:09
【问题描述】：

我有一个登录按钮（哑组件）会触发一个函数 onClick：

<Button loading={this.state.isBusy}
        onClick={this.login}>Login</Button>

但问题是，当用户输入错误的凭据并多次按 Enter 键时，该功能也会被多次触发，并且同时出现一些警告消息（警告消息告诉用户凭据错了）。

我已经尝试了一些解决方案来解决这个问题：

设置状态不是一个有效的解决方案，因为状态的修改速度不够快。
我已尝试使用 ref 禁用按钮，但我无法使用它的新版本 (React.createRef())，因为它仅适用于 React 16.3 版本我正在运行 16.2 版。
我尝试使用 e.target 将禁用添加到按钮：onClick={(e) => this.login(e)}，然后 e.target.setAttribute ("disabled", "disabled"); 在 login() 函数中，但是当你快速回车时这不起作用。
最后，我尝试在类中使用全局变量：this.isLoading = false;为了使用它而不是状态来停止 login() 函数被触发if isLoading === true。

所以我在这里寻求帮助。如果我不够清楚，请告诉我。

提前非常感谢！

编辑：这是我在 login() 函数中呈现警告的方式：

if(!this.state.usernameValue) {
  EventEmitter.emit(EventEmitter.events.messagePopup.OPEN_MESSAGE_POPUP_ALERT, {message: "Please enter a username or e-mail!"});
  return;
}

if(!this.state.passwordValue) {
  EventEmitter.emit(EventEmitter.events.messagePopup.OPEN_MESSAGE_POPUP_ALERT, {message: "Please enter a password!"});
  return;
}

【问题讨论】：

如何呈现警告？您能否将相关代码添加到您的问题中？
处理多个表单提交的一种流行方法是在检查凭据时显示一个微调器。请为您的实现分享一个 js fiddle。

标签： javascript reactjs

【解决方案1】：

嗯，我认为你几乎是正确的，你可以在 16.2 中使用较旧的反应设置 ref

<button ref={btn => { this.btn = btn }} onClick={e => { this.handleClick(e) }}>

handleClick (e) {
 e.preventDefault()
 this.btn.setAttribute("disabled", "disabled")

 login().then(() => {
   this.btn.removeAttribute("disabled")
 })
}

【讨论】：

我之前确实尝试过，但它在我的控制台中抛出了一个错误。而且我更喜欢避免使用 ref ，但是谢谢 :)

【解决方案2】：

考虑下面的代码

handleClick=()=>{点击提交后调用的函数块

if(this.state.name===validation condition)
      //every time the validation fails
 {    this.setState({submit:false)   
      //submit must be in state with initial value =false
 }
 else {
   this.setState({submit:true})
 }
  if(this.state.submit===true){
      //Login API call or pass it to a function 
 }
}
<input type="text" onChange={(event)=> 
            {this.setState(name:event.target.value)}}
<button onClick={this.handleClick} />

` 每次验证检查失败时都会触发 if 块并且不会进行 API 调用。

【讨论】：

【解决方案3】：

其实我找到了另一种解决方案，就是在敲回车后去掉输入的焦点：

login(elFocused) {
  if(elFocused) {
    elFocused = "." + elFocused;
    document.querySelector(elFocused).blur();
  }
}

<input onEnter={() => this.login("inputClassName")} />

这样我就不必再担心多次敲击 Enter 键了，因为它不再可能了 ;) 这也适用于按钮！

【讨论】：