Llame a una funcion después de la ejecución de un onClick ha terminado

Tengo el siguiente botón en una página, donde intento implementar un pergamino ToTop props

Ahora este botón parece ser el siguiente

const Button: React.SFC = props => {
  const { icon, children, className, hidden, displayNone, style, subtype, text } = props;
  const socialIcon = getSocialIcon(subtype);
  const iconElement =
    icon || socialIcon ? (
      
    ) : null;
    
  const onClick = function (props, e) {
    console.log("clicked")
    e.preventDefault();
    
    if (typeof props.onClick === "function") {
      props.onClick(e);

    }

  };

  return (
    
  );
};

Y la solicitud de función Click es

requestClick= () => {
    
    const { paramsData } = this.state;
    let formOK = true

    if (paramsData.length > 0) {
      formOK = this.validationValue();
    } else {
      this.validationValue();
      formOK = false
    }


    formOK && this.props.addStep();

  };

Ahora necesito añadir algo de este código.

 window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth"
      });

Esta pieza de código debe ejecutarse si en la solicitudHaga clic() las condiciones formanOK " sensible this.props.addStep(); son TRUE.

El punto es, El componente de botón es un componente general, y no quiero poner el pergamino Función ToTop en cada componente que contiene esa lógica.

Así que estoy tratando de añadirlo en el componente de botón.

Para conseguir algo como

const Button: React.SFC = props => {
  const { icon, children, className, hidden, displayNone, style, subtype, text } = props;
  const socialIcon = getSocialIcon(subtype);
  const iconElement =
    icon || socialIcon ? (
      
    ) : null;
    
  const onClick = function (props, e) {
    console.log("clicked")
    e.preventDefault();
    
    if (typeof props.onClick === "function") {
      props.onClick(e);
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth"
      });
    }

  };

Pero tengo dos problemas. En primer lugar, la función onClick solo se ejecutará si comentario //{...props} a la vuelta del componente Button, como sigue:

Porque de lo contrario se ha sobrescrito (no sé realmente por qué). No estoy seguro si es seguro comentar. El segundo problema es que si comentario el operador de distribución props, lo dejo como es, pero si la validación de la forma falla formOK && this.props.addStep(); ejecutará el desplazamiento ToTop pero solo quiero que se ejecute si no falla.

Así que no sé cómo manejar esto. Para obtener algún tipo de verdadero callback de la función onClick pasó como prop, y basado en que ejecutar o no el desplazamiento ToTop.

Pregunta hecha hace 3 años, 4 meses, 29 días - Por pixelpilot

2 Respuestas:

  • Para resolver este problema, puedes hacer lo siguiente:

    • Elimina el comentario `{...props}` del botón para evitar sobrescribir la función `onClick`.
    • Para manejar el desplazamiento ToTop solo cuando la validación de la forma es exitosa, puedes incluir una condición dentro de la función `onClick` que verifique si la validación es verdadera antes de llamar al prop `onClick`. Si la validación es exitosa, luego puedes ejecutar la función `onClick` y realizar el desplazamiento ToTop.

    Aquí tienes una propuesta de cómo podrías modificar tu componente Button para lograr esto:

    jsx
const Button: React.SFC = props => {
  const { icon, children, className, hidden, displayNone, style, subtype, text } = props;
  const socialIcon = getSocialIcon(subtype);
  const iconElement =
    icon || socialIcon ? (
      
    ) : null;

  const onClick = function (e) {
    e.preventDefault();

    const { onClick, addStep } = props;
    const { paramsData } = this.state;
    let formOK = true;

    if (paramsData.length > 0) {
      formOK = this.validationValue();
    } else {
      this.validationValue();
      formOK = false;
    }

    if (formOK && typeof onClick === "function") {
      onClick(e);
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth"
      });
      addStep();
    }

  };

  return (
    
  );
};

    Con estos cambios, la función onClick ahora manejará la validación de la forma y ejecutará el desplazamiento ToTop solo si la validación es exitosa y hay una función onClick proporcionada como prop.

    Espero que esta solución te ayude a lograr lo que necesitas en tu componente Button. Si tienes alguna otra pregunta o duda, no dudes en decírmelo.

    Respondida el Dec 19, 2020 a las 10:45 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para abordar tus problemas:

    1. Evitar sobrescribir el operador de propagación:

    El operador de propagación ({...props}) en el componente de botón puede sobrescribir el evento onClick que deseas pasar. Para evitar esto, puedes usar el operador de propagación antes de establecer el evento onClick:

    
const onClick = function (props, e) {
  console.log("clicked")
  e.preventDefault();

  {...props}

  if (typeof props.onClick === "function") {
    props.onClick(e);
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth"
    });
  }
};

    2. Ejecutar desplazamiento solo si la validación es correcta:

    Para ejecutar el desplazamiento solo si la validación de la forma es correcta, puedes modificar tu código de la siguiente manera:

    
const onClick = function (props, e) {
  e.preventDefault();

  if (typeof props.onClick === "function") {
    props.onClick(e, (result) => {
      if (result) {
        // La validación fue correcta, ejecuta el desplazamiento
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      }
    });
  }
};

    En este caso, le estás pasando un callback al evento onClick que se llama después de que se haya ejecutado la función onClick original. Puedes usar este callback para verificar el resultado de la validación y ejecutar el desplazamiento en consecuencia.

    Ten en cuenta que el código result => {...} es una función de flecha asincrónica que se ejecutará después de que se haya resuelto la promesa devuelta por props.onClick.

    Respondida el Dec 19, 2020 a las 10:50 - por Gemini

    Votos positivos: 0 | Votos negativos: 0