如何解决如何在React Native中防止多次单击按钮?
我正在开发一个涉及登录用户的项目,并且它运行良好(我正在使用Firebase进行身份验证)。但是,要进行登录,还需要一些时间,具体取决于互联网连接,因此我需要在单击按钮后将其禁用,然后再次将其重新启用。这是我的代码:
class Login extends Component {
handlelogin = () => {
this.setState.errorMessage = '';
const {email,password} = this.state;
auth
.signInWithEmailAndPassword(email,password)
.then(() => this.props.navigation.navigate('Home'))
.catch((error) => this.setState({errorMessage: error.message}));
};
render() {
return (
// Some code to handle input
<TouchableOpacity
style={
!this.state.email || !this.state.password
? styles.disabled
: styles.button
}
disabled={!this.state.password || !this.state.email}
onPress={this.handlelogin}>
<Text style={{color: '#fff',fontWeight: '500'}}>Sign in</Text>
</TouchableOpacity>
)}
我尝试使用此answer来使我的代码像这样运行,但这似乎不起作用:
class Login extends Component {
loginProcess = false;
handlelogin = () => {
this.setState.errorMessage = '';
const {email,password)
.then(() => this.props.navigation.navigate('Home'))
.catch((error) => {
this.setState({errorMessage: error.message})
this.loginProcess = false;
});
};
render() {
return (
// Some code to handle input
<TouchableOpacity
style={
!this.state.email || !this.state.password
? styles.disabled
: styles.button
}
disabled={!this.state.password || !this.state.email}
onPress={()=> {
if (!loginProcess) {
this.handleLogin;
this.loginProcess = true;
}
}>
<Text style={{color: '#fff',fontWeight: '500'}}>Sign in</Text>
</TouchableOpacity>
)}
P.S这是我关于stackoverflow的第一个问题,对于编写更好的问题的任何提示表示赞赏
解决方法
您可以实现一个Spinner,它在首次单击时显示而不是按钮,并在通话结束后显示按钮。
不久前我遇到了同样的问题-这是一个小例子:
const MyComponent = ({makePutCall}) => {
const [showSpinner,setShowSpinner] = useState(false);
const handlePress = async () => {
setShowSpinner(true);
await makePutCall();
setShowSpinner(false);
}
return showSpinner ? <Spinner/> : <Button onPress={handlePress}/>
}
作为“旋转者”,只需使用react-native的ActivityIndicator。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。