如何在单击它后禁用React Native中的按钮

Question

我正在做一个大项目，我遇到了一些问题。

每次单击登录按钮时，都需要一段时间才能建立数据库连接，如果此按钮是警报并且您多次单击它，它也会多次显示警报。

这是按钮：

 <TouchableOpacity
              style={styles.submitButton}
              onPress={
                () => this.login(this.state.email, this.state.password)
              }>
              <Text style={styles.submitButtonText}>Login</Text>
 </TouchableOpacity>

我想在点击它后禁用该按钮，因此警报错误只出现一次。

这是我想放置代码以停用按钮的地方：

if (respo == 'Wrong name or password.') {
          alert("Wrong Username and Password.");
        } else {
          if (respo.user.uid > 0) {
            if (Object.values(respo.user.roles).indexOf("student user") > -1) {
              AsyncStorage.setItem("u_uid", respo.user.uid);
              alert("Login Successfull.");
              Actions.home();
            } else {
              alert("Only Student user is allowed to login.");
            }
          }
        }

谢谢！

Answer 1

嗯，最简单的逻辑可能是：

1. 设置一个变量，用于跟踪登录过程是否正在进行中，例如是var loginInProcess = false。这可能应该设置在跟踪应用程序状态的某个父组件的状态中，但让我们保持简单。
2. 在onPress事件中，设置值loginInProcess = true
3. 有条件地执行登录操作，仅在登录不在进行时执行：

例如：

   onPress = {() => {

    if (!loginInProcess) {
        loginInProcess = true;
        this.login(this.state.email, this.state.password)
    } else {
        /*Login in process, do something else*/
    }}}>

1. 如果登录失败（您的第二个代码块），请重置变量loginInProcess = false，以便能够再次尝试“登录”。