0

Tengo un boton que suma unos valores en un array, pero si por error doy doble click en el boton, esta suma de duplica. Lo cual perjudica mi resultado.

Mi pregunta es: abra alguna forma de evitar que se pueda dar doble click a un boton, no se algun atributo o propiedad que me ayude con esto? y disculpen mi ignorancia estoy aprendiendo.

Mi boton se encarga de sumar unos valores y guardar en la coleccion de firebase, pero si por error doy doble click entonces este resultado se duplica y asi se guarda en la base de datos lo cual debo evitar resultados errados. Quisiera bloquear de alguna manera esto, que cuando se de doble click entonces mi resultado se mantenga como inicialmente se calculo. Estoy trabajando con reactjs

Este es mi codigo del boton:

const generateReport = async () => {
    const objArray = await consultValues();
    const resultObjArray = [];
    objArray.forEach((el) => {
      const objectIndex = resultObjArray.findIndex(
        (obj) => obj.filas === el.filas && obj.columnas === el.columnas
      );
      if (objectIndex === -1) {
        resultObjArray.push(el);
      } else {
        resultObjArray[objectIndex].valores += el.valores;
      }
    });
    addCollectionResult(resultObjArray);
    navigate("/report-generated");
  };

y asi esta en el jsx

<section>
  <ButtonApp name="Generar Reporte" onClick={generateReport} />
</section>
4
  • Puedes añadir una variable en tu estado que sea isGeneratingReport. La variable se cambia a true en cuanto generateReport es ejecutado. En generate report, haces un early return si isGeneratingReport es verdadero. La variable se cambia a false cuando tu await se complete.
    – Jacobo
    el 27 oct. 2022 a las 21:14
  • @Jacobo gracias, me podrias mostrar un ejemplo es que no entendi muy bien.
    – Ndmo
    el 27 oct. 2022 a las 21:21
  • @GmrYael ya puso exactamente lo que te deje en el comentario.
    – Jacobo
    el 27 oct. 2022 a las 21:25
  • @Jacobo eso me funciono! gracias
    – Ndmo
    el 27 oct. 2022 a las 21:28

1 respuesta 1

2

Sin conocer la estructura que tiene tu ButtonApp, teniendo en cuenta que le puedas pasar directamente la propiedad al button!

Lo puedes manejar en el estado:

const SampleComponent = () => {
  const [disabledBtn, setDisableBtn] = React.useState(false);

  const generateReport = async () => {
    if (disableBtn) {
      return;
    }

    setDisableBtn(true);

    const objArray = await consultValues();
    const resultObjArray = [];
    objArray.forEach((el) => {
      const objectIndex = resultObjArray.findIndex(
        (obj) => obj.filas === el.filas && obj.columnas === el.columnas
      );
      if (objectIndex === -1) {
        resultObjArray.push(el);
      } else {
        resultObjArray[objectIndex].valores += el.valores;
      }
    });
    addCollectionResult(resultObjArray);
    navigate("/report-generated");
  };
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.