Does onSubmit work differently in Ionic?

Ionic Framework Ionic React
1

I did a React tutorial for making a comment section and am bringing it over to my Ionic/React app. Below is my code:

import { useState } from "react";
import {IonTextarea, IonItem, IonPage, IonButton, IonLabel, IonContent } from '@ionic/react'


const CommentForm = ({handleSubmit, submitLabel, hasCancelButton = false, initialText = '',handleCancel}) => {
  const [text, setText] = useState(initialText);
  const isTextareaDisabled = text.length === 0;
  console.log('moe', text.length)
  const onSubmit = (event) => {
    console.log('beforeprevent')
    event.preventDefault()
    console.log('afterprevent')
    handleSubmit(text)
    setText("")
  }

  return (
	    <form onSubmit={onSubmit}>
	<IonTextarea className="comment-form-textarea" value={text} onIonChange={(e) => setText(e.target.value)}/>
	<IonButton className="comment-form-button" disabled={isTextareaDisabled}>{submitLabel}</IonButton>
	{hasCancelButton && (
	    <IonButton type="button" className="comment-form-button comment-form-cancel-button" onClick={handleCancel}>
		    Cancel
	    </IonButton>
	)}
	    </form>
  );
}

export default CommentForm;

when I load this on my localhost it looks great. When I type into the text box the button becomes clickable which is what I want. However, when I click the submit button it doesn’t trigger the ‘beforeprevent’ or ‘afterprevent’ console logs. So for some reason it’s failing at the tag. This works in the React version of the code so I’m wondering if there is something Ionic-like I’m missing.

Thanks.

2

I just had to make the button a submit type:

<IonButton type="submit" disabled={isTextareaDisabled}>Write</IonButton>