Dev Faq
0
votes

Réagir: changement de bouton de changement tout en faisant du travail

dans mon réagir application, je voudrais un bouton qui dit normalement Enregistrer code>, modifications Son texte à sauvegarde ... code> Lorsque vous avez cliqué et le modifie le retour sur Enregistrer code> Une fois la sauvegarde terminée.

Ceci est ma première tentative: P> 

const { isWorking } = this.props.isWorking;

2 commentaires

Vous ne voulez généralement pas utiliser de réf. Au lieu de cela, pourquoi ne pas avoir le composant parent transmet également une poignée à un onsavesuccy () fonction que les enfants peuvent appeler au besoin?

Pouvez-vous simplement attendre la demande OnClick? En supposant que l'ONCLICK est une demande postale à un serveur, vous attendre the onclick () de sorte que async onclick () n'atteint jamais le ceci.setstate ({émettant: faux}); jusqu'à ce que la demande soit terminée.

3 Réponses :

0
votes

Pouvez-vous voir? https://developer.mozilla.org/tr/docs/ Web / JavaScript / référence / Global_Objects / Promise

Componeur parent Fonction P> 

onClick(){
  this.setState({ isSaving : true });
  this.props.onClick().then(function(){
    this.setState({ isSaving : false });
 });
}

0 commentaires
1
votes

Cela ne fonctionne pas parce que le STSTAT et cela.PROSS.ONCLICK () (transmis par le composant parent) sont exécutés de manière asynchrone, donc Les appels renvoient immédiatement et le passage à l'état est probablement perdu En réagissant d'optimisation

setstate peut Prenez un rappel à Que vous sachiez une fois que l'état a été mis à jour, vous pouvez donc avoir: xxx

si ceci.props.onclick () est aussi async, tournez-le dans une promesse: xxx

0 commentaires
0
votes

Voici votre code qui fonctionne: 

import React from 'react';
import { Button } from 'react-bootstrap';

class SaveButton extends React.Component {
    constructor() {
        super();
        this.state = {
            isSaving: false
        };
        this.handleOnClick = this.handleOnClick.bind(this);
    }

    handleOnClick() {
        this.setState(prevState => {
            return {
                isSaving: !prevState.isSaving
            }
        });
        console.log("Clicked!",this.state.isSaving);
        this.handleSave();
    }
    handleSave() {
        // Do what ever and if true => set isSaving = false
        setTimeout(()=>{
            this.setState(prevState=>{
                return {
                    isSaving: !prevState.isSaving
                }
            })
        },5000)
    }

    render() {
        const  isWorking  = this.state.isSaving;
        return (
            <Button
                    bsStyle="primary"
                    onClick={this.handleOnClick}
            >
                    {isWorking ? 'Saving...' : 'Save'}
            </Button>

        );
    }
}

export default SaveButton;

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO