单击它后如何在 React Native 中禁用按钮
How to disable a button in React Native after clicking it
我正在做一个庞大的项目,但遇到了一些问题。
每次点击登录按钮,都需要一段时间才能建立数据库连接,如果这个按钮是一个警报,你点击它多次,它也会显示多次警报。
这是按钮:
<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.");
}
}
}
谢谢!
嗯,最简单的逻辑可能是:
- 设置一个变量来跟踪登录过程是否在进行中,例如
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"。
我有一个很好的解决方案,你可以用它来禁用按钮
<View style={styles.MainContainer} >
<TouchableOpacity
activeOpacity = { .5 }
disabled={true}
onPress={this.SampleButtonFunction}
>
<Text>Submit</Text>
</TouchableOpacity>
</View>
此 activeOpacity 和禁用适用于此
我正在做一个庞大的项目,但遇到了一些问题。
每次点击登录按钮,都需要一段时间才能建立数据库连接,如果这个按钮是一个警报,你点击它多次,它也会显示多次警报。
这是按钮:
<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.");
}
}
}
谢谢!
嗯,最简单的逻辑可能是:
- 设置一个变量来跟踪登录过程是否在进行中,例如
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"。
我有一个很好的解决方案,你可以用它来禁用按钮
<View style={styles.MainContainer} >
<TouchableOpacity
activeOpacity = { .5 }
disabled={true}
onPress={this.SampleButtonFunction}
>
<Text>Submit</Text>
</TouchableOpacity>
</View>
此 activeOpacity 和禁用适用于此