reactjs - 如何在单击按钮后禁用 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*/
    }}}>

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