如何在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。

react-native touchableopacity