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

Posted 2023-02-22

【中文标题】单击后如何在 React Native 中禁用按钮

【英文标题】：How to disable a button in React Native after clicking it

【发布时间】：2018-08-25 08:08:24

【问题描述】：

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

每次点击登录按钮，都需要一段时间才能建立数据库连接，如果这个按钮是alert，你点击多次，它也会多次显示alert。

这是按钮：

 <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.");
            
          
        

谢谢！

【问题讨论】：

为什么不使用带有disabled 属性的Button 组件？

因为它不会将styles 作为prop，并且color prop renders 对于android 和ios 的不同视图。请检查文档@987654321 @

【参考方案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 以便能够再次尝试“登录”。

【参考方案2】：

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

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

此 activeOpacity 和禁用适用于此