React Native中如何点击后禁用登录按钮避免重复触发

这个问题我太熟悉了——重复点击登录按钮导致多次请求、弹窗满天飞，确实头疼！咱们可以通过控制按钮的禁用状态来彻底解决，具体实现步骤如下：

1. 添加按钮禁用状态到组件State #

首先在你的组件State里新增一个控制按钮是否禁用的字段，初始值设为false（按钮默认可点击）：

constructor(props) {
  super(props);
  this.state = {
    email: '',
    password: '',
    isButtonDisabled: false // 新增：控制按钮禁用状态
  };
}

2. 修改登录按钮组件，绑定禁用状态 #

给TouchableOpacity添加disabled属性，绑定刚才新增的State字段，同时可以加个禁用样式让用户直观看到按钮不可点击：

<TouchableOpacity
  style={[
    styles.submitButton,
    // 禁用时添加灰化样式
    this.state.isButtonDisabled && styles.disabledButton
  ]}
  onPress={() => this.login(this.state.email, this.state.password)}
  disabled={this.state.isButtonDisabled} // 绑定禁用状态
>
  <Text style={styles.submitButtonText}>Login</Text>
</TouchableOpacity>

对应的禁用样式可以这样写（根据你的需求调整）：

disabledButton: {
  opacity: 0.6,
  backgroundColor: '#cccccc',
}

3. 在登录逻辑中控制按钮状态 #

修改你的login函数，点击按钮后立即禁用，然后在请求完成（无论成功还是失败）时，除了登录成功跳转的情况，都恢复按钮的可点击状态：

login = async (email, password) => {
  // 点击后立刻禁用按钮，防止重复点击
  this.setState({ isButtonDisabled: true });

  try {
    // 这里替换成你实际的接口请求代码
    const respo = await yourLoginApiCall(email, password);

    // 你的原有响应处理逻辑，添加按钮状态恢复逻辑
    if (respo == 'Wrong name or password.') {
      alert("Wrong Username and Password.");
      // 登录失败，恢复按钮可点击
      this.setState({ isButtonDisabled: false });
    } else {
      if (respo.user.uid > 0) {
        if (Object.values(respo.user.roles).indexOf("student user") > -1) {
          await AsyncStorage.setItem("u_uid", respo.user.uid);
          alert("Login Successfull.");
          Actions.home(); // 登录成功跳转，无需恢复按钮（页面已切换）
        } else {
          alert("Only Student user is allowed to login.");
          // 权限不足，恢复按钮可点击
          this.setState({ isButtonDisabled: false });
        }
      } else {
        // 其他异常情况，恢复按钮
        this.setState({ isButtonDisabled: false });
      }
    }
  } catch (error) {
    // 网络错误或请求异常时，提示并恢复按钮
    alert("Login failed, please try again later.");
    this.setState({ isButtonDisabled: false });
  }
};

这样修改后，用户点击登录按钮后，按钮会立即变成不可点击状态，直到请求完成（失败或异常）才恢复，彻底避免了重复点击导致的多次弹窗问题。

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