单击它后如何在 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

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

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

例如：

   onPress = {() => {

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

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

Answer 2

我有一个很好的解决方案，你可以用它来禁用按钮

<View style={styles.MainContainer} >
     <TouchableOpacity
         activeOpacity = { .5 } 
         disabled={true}
         onPress={this.SampleButtonFunction} 
      > 
         <Text>Submit</Text>
     </TouchableOpacity>
</View>

此 activeOpacity 和禁用适用于此

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

How to disable a button in React Native after clicking it

reactjs

button

react-native

native