Reactjs中如何避免按回车键多次触发登录按钮/函数？

我来帮你搞定这个重复提交的麻烦！你遇到的核心问题是：请求还在处理时，用户重复触发了登录函数，导致多条错误提示。其实只要从阻止重复触发和禁用交互两个层面入手就能解决，给你几个实用方案：

1. 给按钮加上禁用状态（最直接） #

你已经有isBusy状态来控制加载效果了，只需要把它同时绑定到按钮的disabled属性上。这样当请求进行中时，按钮会被禁用，不管是点击还是回车（表单内的回车会触发提交按钮）都没法触发login函数：

<Button 
  loading={this.state.isBusy} 
  onClick={this.login}
  disabled={this.state.isBusy} // 关键：添加这一行
>
  Login
</Button>

2. 表单场景下的额外处理 #

如果你的按钮是在表单里，用户可能通过输入框回车触发表单提交，这时候建议给表单绑定提交事件，在事件里先检查isBusy状态，避免绕过按钮的禁用逻辑：

// 定义表单提交处理函数
handleFormSubmit = (e) => {
  e.preventDefault();
  // 如果正在请求，直接返回，不执行登录
  if (this.state.isBusy) return;
  this.login();
}

// 表单结构
<form onSubmit={this.handleFormSubmit}>
  {/* 账号、密码输入框 */}
  <Button 
    loading={this.state.isBusy} 
    onClick={this.login}
    disabled={this.state.isBusy}
    type="submit"
  >
    Login
  </Button>
</form>

3. 函数内加锁（双重保险） #

有时候React的状态更新是异步的，可能状态还没更新完成，用户就再次触发了函数。这时候可以给login函数加一个临时锁，用实例变量来控制，确保同一时间只有一个请求在执行：

constructor(props) {
  super(props);
  this.state = { isBusy: false };
  this.isLoggingIn = false; // 临时锁变量
}

login = async () => {
  // 如果已经在登录中，直接返回
  if (this.isLoggingIn) return;
  
  this.isLoggingIn = true;
  this.setState({ isBusy: true });

  try {
    // 这里放你的登录请求逻辑，比如调用API
    await yourLoginApiCall(username, password);
    // 登录成功后的操作，比如跳转页面
  } catch (error) {
    // 错误提示逻辑，这里只会执行一次
    showErrorToast(error.message);
  } finally {
    // 请求结束后解锁，恢复按钮状态
    this.isLoggingIn = false;
    this.setState({ isBusy: false });
  }
}

这几个方案组合起来，就能彻底解决重复触发的问题了。优先用第一种方案，简单直接，再配合第三种做双重保险，基本不会有遗漏的情况。

内容的提问来源于stack exchange，提问作者Jerlam