如何防止在本机反应中多次点击按钮？

Question

我正在做一个涉及用户登录的项目，它工作正常（我使用 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 这是我在 Whosebug 上的第一个问题，感谢任何写出更好问题的提示

Answer 1

您可以实现一个微调器，它在第一次单击时显示而不是按钮，并在调用完成后显示按钮。

不久前我遇到了同样的问题 - 这里有一个小例子：

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。

如何防止在本机反应中多次点击按钮？

How to prevent multiple clicks on a butoon in react native?

react-native

touchableopacity