Как предотвратить многократные клики по бутону в 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>
)}

Я пробовал этот ответ, чтобы мой код работал так, но это не сработало:

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

P.S. Это мой первый вопрос о stackoverflow, любой совет по написанию более подробных вопросов приветствуется.


react-native touchableopacity
person Community    schedule 01.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете реализовать Spinner, который отображается вместо кнопки при первом нажатии и показывает кнопку после завершения вызова.

Недавно у меня была такая же проблема - вот небольшой пример:

const MyComponent = ({makePutCall}) => {
   const [showSpinner,setShowSpinner] = useState(false);

   const handlePress = async () => {
      setShowSpinner(true);
      await makePutCall();
      setShowSpinner(false);
   }

   return showSpinner ? <Spinner/> : <Button onPress={handlePress}/>
}

в качестве Spinner просто используйте ActivityIndicator из react-native.

person yesIamFaded    schedule 01.10.2020
comment
Спасибо, чувак, это сработало. К сожалению, у меня недостаточно представителей, чтобы проголосовать за ваш ответ. В любом случае, спасибо - person ; 01.10.2020