Tengo un formulario en Ionic + React, intento que NO SE ENVÍE al pulsar un botón submit de Ionic.
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