0

Tengo un formulario en Ionic + React, intento que NO SE ENVÍE al pulsar un botón submit de Ionic.

introducir la descripción de la imagen aquí

He asociado la función handleFormSubmit() a un onClick en el botón con las instrucciones event.preventDefault() y event.stopPropagation() en su interior, pero no funcionan.


Este es el formulario:

import React, { Component } from 'react';
import {
    IonApp,
    IonButton,
    IonCol,
    IonContent,
    IonGrid,
    IonInput,
    IonItem,
    IonLabel,
    IonPage,
    IonRow,
    IonTextarea
} from '@ionic/react';


function Trans(props: any)
{
    const { ...other } = props;

    return <span {...other} />
}
class FormTest extends Component
{
  appPageHome = "/";

  render()
  {
    return (
        <IonApp>
            <IonPage>
                <IonContent>
                    <form name="test-form">
                        <IonGrid>
                            <IonRow>
                                <IonCol size="1"></IonCol>
                                <IonCol size="10">
                                    <IonItem>
                                        <IonLabel position="stacked" color="primary">
                                            <Trans>Nombre</Trans>:
                                        </IonLabel>
                                        <IonInput
                                            name="username"
                                            type="text"
                                            spellCheck={false}
                                            autocapitalize="off"
                                            required />
                                    </IonItem>
                                </IonCol>
                            </IonRow>
                            <IonRow>
                                <IonCol size="1"></IonCol>
                                <IonCol size="10">
                                    <IonItem>
                                        <IonLabel position="stacked" color="primary">
                                            <Trans>Mensaje</Trans>:
                                        </IonLabel>
                                        <IonTextarea
                                            name="message"
                                            autocapitalize="on"
                                            required>
                                        </IonTextarea>
                                    </IonItem>
                                </IonCol>
                            </IonRow>
                        </IonGrid>

                        <IonRow>
                            <IonCol size="1"></IonCol>
                            <IonCol size="5">
                                <IonButton
                                    routerLink={this.appPageHome}
                                    color="light"
                                    expand="block">
                                    <Trans>Cancelar</Trans>
                                </IonButton>
                            </IonCol>
                            <IonCol size="5">
                                <IonButton
                                    type="submit"
                                    expand="block"
                                    onClick={this.handleFormSubmit}>
                                    <Trans>Enviar</Trans>
                                </IonButton>
                            </IonCol>
                        </IonRow>
                    </form>
                </IonContent>
            </IonPage>
        </IonApp>
    );
  }


  sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
  handleFormSubmit = async (event: any) =>
  {
      const e = event || window.event;
      e.preventDefault();
      e.stopPropagation();

      await this.sleep(1000);
      window.alert('Mensaje enviado...');
  }
}

export default FormTest;


Código completo: https://github.com/oricis/ionic_react_ts__one/tree/form-tests

1 respuesta 1

0

El error esta en el posicionamiento del evento.

Cuando designas un evento onClick en un botón y posteriormente en dicho evento tienes e.preventDefault(). Estas evitando el funcionamiento del botón y no así del formulario.

EL evento submit es propio de form, es por ese motivo que tu código no realiza lo que deseas.

La solución es cambiar el evento a tu etiqueta form:

<form name="test-form" onSubmit={subirInfo}>

Y suponiendo que tu IonButton sea un button, tu botón quedaría así:

<IonButton
   type="submit"
   expand="block"
   <Trans>Enviar</Trans>
</IonButton>

Luego en tu función debería bastar con preventDefault aparte de eso solo le cambie el nombre:

subirInfo = async (event: any) =>
{
  const e = event || window.event;
  e.preventDefault();

  await this.sleep(1000);
  window.alert('Mensaje enviado...');
}
1
  • Ok, con un onSubmit() en el form funciona, si usas e.stopPropagation() ya había probado tu solución con e.preventDefault(), que es lo habitual en los formularios... Cosas de Ionic.
    – Orici
    Commented el 23 may. 2020 a las 17:02

Tu Respuesta

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

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