Dev Faq
0
votes

Indicateur de chargement Lorsque vous avez cliqué sur le bouton (ReactJS et Design de Ant)

J'ai fait un bouton qui change son étiquette de "extrait" sur "extrait" lorsqu'il est cliqué alors il devient désactivé. Ce que je veux faire maintenant, c'est que cela ait un indicateur de chargement lorsque vous avez cliqué et arrêtez lorsque le bouton est désactivé.

J'ai essayé

document.getelementByID (INPPARTID) .SettatTtribute ("chargement", "vrai");

Lorsque vous cliquez sur le bouton, mais que cela ne fonctionne pas sur les boutons. J'essaie également maintenant d'utiliser le Stateau avec mon

document.getYeyID ("Btntesting"). Innerhtml = "extrait"; xxx

je m'attends Pour avoir un indicateur de chargement lorsque vous avez cliqué, arrêtez-vous lorsque le bouton est désactivé. Mais l'écran devient vide. Je regarde dans la console et j'ai vu cette erreur

non capturée DomException: Impossible d'exécuter 'Insérer avant' sur "Node": le nœud avant que le nouveau nœud doit être inséré n'est pas un enfant de ce nœud. < / p>

L'erreur ci-dessus s'est produite dans le composant: blabla . bla.

non capturé domexception: Impossible d'exécuter "INSERTBEfore" sur "nœud": le nœud avant lequel le nouveau nœud doit être inséré n'est pas un enfant de ce nœud.

3 commentaires

Tout d'abord. Pourquoi ne gérez-vous pas le texte du bouton et l'attribut désactivé dans l'état?

Quand j'ai utilisé l'état, mes autres boutons sont modifiés aussi. Donc j'ai essayé d'utiliser innerhtml

@ Alex.reid. Vous devriez utiliser une valeur d'état distincte pour tous les boutons pour éviter cela.

3 Réponses :

0
votes

Parce que vous utilisez réagi, vous n'avez pas besoin d'utiliser le innerhtml code> ou setattribute code> pour changer de texte texte ou état désactivé.

Vous pouvez utiliser l'état Varibles ButTontext code>, initialisée à "Extraire" et ISDisabled code>, initialisé sur FALSE, et vous pouvez modifier l'état une fois que le bouton est effectué en cours d'exécution. P> 

class DashboardPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      buttonText: "EXTRACT",
      isDisabled: false
    };
  }
  onClickBtn = () => {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({
        buttonText: "EXTRACTED",
        isDisabled: true,
        loading: false
      });
    }, 2000);
  };
  render() {
    return (
      <Button
        id="btnTesting"
        onClick={this.onClickBtn}
        loading={this.state.loading}
        disabled={this.state.isDisabled}
      >
        {this.state.buttonText}
      </Button>
    );
  }
}

3 commentaires

Et si j'ai plusieurs boutons? Comment puis-je utiliser mon identifiant de bouton? Nous avons en fait une carte d'identité dynamique de l'API. Donc, notre identifiant ressemble à quelque chose comme ça id = { extractebutton - $ {valeur.sectiond} $ {valeur.specimenid} $ {VAL UE.ReQuestD} } }

Ensuite, votre état peut avoir des objets pour chaque identifiant de bouton avec le bouton Texte et le chargement de l'état et de l'état désactivé. J'ai mis à jour mon Codesandbox avec plusieurs boutons

Yess. Exactement ce dont j'avais besoin. Je vais aussi essayer d'utiliser des noms d'objet dynamiques. Merci pour cela!

0
votes

Pouvez-vous vérifier si le code ci-dessous résout votre problème? J'ai ajouté la minuterie pour démontrer le temps affectant de manière à ce que le chargement devienne évident.

avec réactjs, vous n'avez pas à utiliser Satattribute ou innerhtml car réactjs utilise Virtualdom. Même si vous les utilisez, cela peut obtenir DOM dans l'état incohérent. Selon la pratique de réaction standard, vous devez gérer vos exigences (c'est-à-dire une modification de DOM) avec des variables d'état xxx

5 commentaires

Je pense que j'ai essayé ces semaines auparavant. Mais ce qui se passe, c'est si j'ai plusieurs boutons, ils chargent tous et changent d'étiquette en même temps. Mais c'est ce dont j'avais besoin. Je ne sais tout simplement pas ce que je devrais faire si j'ai plusieurs boutons. PS: Je suis un débutant dans ReactJS.

{this.state.buttontext} < Bouton ID = "BTN2" Onclick = {this.onclickbn} Chargement = {this.state.loading} désactivé = {this.state.disabled}> {this.state.buttontext}

Dans ce cas, chaque bouton doit utiliser une variable d'état différente pour le chargement et le texte du bouton. Cela pourrait vous désordonner, vous pouvez donc utiliser des tableaux pour représenter chaque texte de chargement.

Pouvez-vous s'il vous plaît élaborer?

J'ai mis à jour ma réponse (vérifiez comment le chargement de l'état est mis à jour maintenant) pour vous donner une idée. Vous devrez faire la même chose pour les 2 autres États aussi.

0
votes 
import { Button } from 'antd';
import React from "react";

class SubmitButton extends React.Component {
state = {
    loadings: [],
};

enterLoading = index => {
    this.setState(({loadings}) => {
        const newLoadings = [...loadings];
        newLoadings[index] = true;

        return {
            loadings: newLoadings,
        };
    });
};

render() {
    const {loadings} = this.state;
    return (
        <>
            <Button type="primary" htmlType="submit" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
                Submit
            </Button>
        </>
    );
}
Code:
https://codesandbox.io/s/withered-framework-w5lmc?file=/src/App.js
0 commentaires

Articles qui pourrait vous intéresser :

Mon application create-react ne parvient pas à se compiler en raison d'une erreur ESLint
Erreur: Node Sass version 5.0.0 est incompatible avec ^ 4.0.0
La réinitialisation de React-hook-form fonctionne correctement, les champs de saisie ne se vident toujours pas après l'envoi
Changer le format numérique du champ d'entrée dans le mode d'édition de ligne de table d'Antd?