Si dejo esto como un campo en blanco, esto hará que el total se muestre como isNaN y no quiero que se envíe el formulario si es un isNaN . ¿Cómo evito que se envíe el formulario si el valor total se muestra como isNaN ?
export default function BasicTextFields() { const [fee, setFee] = useState(0); const amount = parseInt(1000); const total = Number(amount) + Number(fee); const handleSubmit = async (e) => { e.preventDefault(); console.log(" submit"); }; return ( <form onSubmit={{ handleSubmit }}> <TextField label="Fee" type="number" value={fee} onChange={(e) => setFee(parseInt(e.target.value))} InputProps={{ inputProps: { min: 0 } }} /> <button type="submit">Submit</button> <br /> Total: {total} </form> ); }códigos y caja: https://codesandbox.io/s/basictextfields-material-demo-forked-7sfdph?file=/demo.js:171-809
Puedes usar
onChange={(e) => { if(e.target.value===""){ setFee(0); }else{ setFee(parseInt(e.target.value))}} }import React, { useState } from "react"; import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; export default function BasicTextFields() { const [fee, setFee] = useState(0); const amount = parseInt(1000); const total = Number(amount) + Number(fee); // async is not required if you are not using await keywork in function. const handleSubmit = (e) => { e.preventDefault(); if (isNaN(fee)) { console.log("its not a number"); } else { console.log("its a number"); // this submit will refresh page. // e.target.submit(); // if you do not want page to refresh. // remeber there is different approch for image data. var formData = new FormData(); formData.append('fee', fee); console.log(formData); // continue with sending data to your backend server } }; const changeFee = (e) => { setFee(e.target.value); } return ( // use only one curly braces <form onSubmit={handleSubmit}> <TextField label="Fee" type="text" value={fee} onChange={changeFee} InputProps={{ inputProps: { min: 0 } }} /> <button type="submit">Submit</button> <br /> Total: {total} </form> ); }lea todos los comentarios mencionados en el código anterior, tal vez ayude.