Question

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

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

但问题是当用户键入错误的凭据并多次点击Enter键时，该功能也会被多次触发，并且会立即显示一些警告消息（警告消息向用户说明凭据是错的。）

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

设置状态不是一个有效的解决方案，因为状态修改得不够快。
我尝试过使用ref来禁用按钮，但我不能使用它的新版本（ React.createRef（）），因为它仅适用于React的16.3版本我正在运行16.2版本。
我尝试使用e.target将禁用添加到按钮： onClick = {（e）=＆gt; this.login（e）} ，然后在 login（）函数中 e.target.setAttribute（“disabled”，“disabled”）; ，但是当你快速进入时，这不起作用。
最后，我尝试在类中使用全局变量：this.isLoading = false;如果isLoading === true ，则使用它而不是状态来停止 login（）函数被触发。

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

提前多多感谢！

编辑：以下是我在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; }

Answer 1

嗯，我认为你几乎是正确的，并且你可以设置ref为较旧的反应为16.2

<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")
 })
}

Answer 2

考虑以下代码

handleClick =（）=＆gt; {单击提交后调用的功能块

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调用。

Answer 3

我实际上找到了另一种解决方案，即在Enter命中后删除输入的焦点：

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

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

通过这种方式，我不再需要担心多次Enter键击中，因为它不再可能;）这也适用于按钮！

在Reactjs中多次按Enter键时，停止触发按钮/功能

3 个答案: