Tengo este number de tipo de campo de texto, quiero establecer un mínimo de 0 y un campo de texto que no acepte valores negativos. Pude hacer eso, sin embargo, una vez que escribo en él, no podría eliminar el 0 , primero tendría que ir al frente del 0 y luego escribir un número, y solo entonces se eliminaría el 0 . ¿Qué puedo hacer para solucionarlo o hay formas más adecuadas de hacerlo?
Códigos y caja:https://codesandbox.io/s/textfield-7sfdph?file=/demo.js:127-882
Códigos:
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) => { if (e.target.value === "") { setFee(0); } else { setFee(parseInt(e.target.value)); } }} InputProps={{ inputProps: { min: 0 } }} /> <button type="submit">Submit</button> <br /> Total: {total} </form> ); }Su función onChange establece el valor en 0 siempre que el valor sea una cadena vacía. Cuando elimina algo, está cambiando efectivamente el valor, por lo que se llamará a la función onChange .
Personalmente, llamaría a setFee con el valor que escribieron porque type=number ya evitará que los usuarios escriban cualquier cosa que no sea un número y les permitirá borrar el campo.
Puede manejar el caso cuando el valor está vacío con validación o en la función onSubmit . Esta es probablemente una mejor experiencia de usuario.
Puede verificar si el número es negativo si es así, luego establezca el valor en 0
const total = Number(amount) + (fee ? Number(fee) : 0); // code if (Number(e.target.value) < 0) { setFee(0); } else { setFee(parseInt(e.target.value)); }luego, al enviar, verifique si el valor no está definido