J'essaie de créer un composant de boutons Soumettre personnalisé qui gérera le bouton désactiver la désactivation par elle-même. Jusqu'à présent, j'ai eu ceci:
Composant de boutons: P>
public submitForm = () => {
setTimeout(() => {
console.log('waiting done');
}, 5000);
};
3 Réponses :
Compte tenu de l'appel de la base de données qui se résout dans un délai de 10 secondes dans les 10 secondes et certains Soumetteurform code> gestionnaire p> const SubmitButton = ({
type,
className,
onClick,
buttonStyle = {},
children
}) => {
const [isDisabled, setIsDisabled] = useState();
const clickHandler = async () => {
setIsDisabled(true);
await onClick();
console.log("after promise");
setIsDisabled(false);
}
return (
<button
type={type || "submit"}
className={className}
onClick={clickHandler}
style={buttonStyle}
disabled={isDisabled}
>
{children}
</button>
);
};
quelques corrections à faire:
BottonClickhandler avec dans le SoumettreButton Composant
- Le
onclick () à l'intérieur du composant SummitButton doit renvoyer une promesse
Copie de travail de votre Le code est ici xxx usage xxx
Réponse de base à votre approche réside dans le fait que JavaScript strong> est de nature asynchrone. Pour assurer, l'exécution se produit de manière synchrone, nous utilisons Vous avez juste besoin de quelques modifications ici. p> Tout d'abord, vous devez faire votre fonction et vous besoin de vous assurer que promess code> comme vous l'avez déjà fait Dans votre code actuel. P> SoumettreForm code> renvoyer un prometteur code> p> SoumettreForm code> s'exécute avant de résoudre
BottonClickHandler Code> Fonction P> const buttonClickHandler = (onClick) => {
return new Promise(async (resolve, reject) => {
console.log('inside promise');
isDisabled = true;
onClick().then((res)=>{
console.log(res)
return resolve(true);
});
});
};
onclick code> comme des fonctions définies par l'utilisateur
ou noms de variables, il va vous donner des erreurs. li>
état code> pour la gestion chargement code>. li>
ul> p>
Que travaillez-vous en ce que vous ne pouvez pas utiliser la promesse JavaScript natif / vanille?
Veuillez créer un Petite démo pour cela en utilisant codesandbox.io pour montrer le problème se produire.
Déplacez l'ISDisabled pour indiquer. Votre composant ne recule pas lorsqu'une variable des changements extérieurs.
Bouton n'est pas désactivé car
isdisabled n'est pas une valeur d'état ou de propulsion, et leButtonClickHandler est immédiatement résolu. Tout ce qu'il fait est de résoudre immédiatement, puis d'appeler le rappel externeonclick qui définit le délai d'attente. Essayez-vous de résoudre la première promesse en 5 secondes avant d'appeler le rappel?@ Drewreese J'utilise le Settimeout juste pour imiter un appel de dB. Le bouton restera désactivé jusqu'à la fin de l'appel. Mais oui, je pense que je dois utiliser l'état pour gérer la désactivation / l'activer.