如何在React Native中防止多次单击按钮？

debugcn 发表于 Dev

NabilTheCoder

我正在开发一个涉及登录用户的项目，并且它运行良好（我正在使用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>
)}

我已经尝试过这个答案，这样我的代码才能这样运行，但这似乎不起作用：

class Login extends Component {

    loginProcess = false;

    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})
        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>
)}

PS：这是我关于stackoverflow的第一个问题，对于编写更好问题的任何提示表示赞赏

yesIamFaded

您可以实现一个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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。