Puede usar para lograr su objetivo agregando algunas condiciones al estado addRate , también usando el step prop del elemento de input :

 import { useState } from "react"; export default function App() { const [rate, setRate] = useState(0); const addRate = (num) => { if (typeof num !== "number" || isNaN(num) || num > 1) { setRate(0); } else { setRate(num); } }; return ( <input type="number" value={rate === 0 ? "" : rate} step={0.01} onChange={(e) => addRate(parseFloat(e.target.value))} /> ); }

Puedes usar en tu entrada:

 <input type='number' value={rate} min={0} max={1} step={0.000001} onChange={e => addRate(parseFloat(e.target.value)} >

establezca el paso de la manera que desee. Y para el NaN, pruébalo:

 if(typeof num == 'number' || isNaN(num))

¡Déjame saber si funciona!

Si planea trabajar con entradas y números, para evitar muchos dolores de cabeza (especialmente cuando usa dispositivos móviles para solicitar al usuario un tipo de entrada adecuado), corrija los errores causados por . vs , , ahorre tiempo en el desarrollo de código y obtenga un código más limpio gracias al uso de directivas. Le sugiero que consulte algunas alternativas. No es mío, pero hombre, lo uso mucho. https://digit-only.firebaseapp.com/demo Recomiendo encarecidamente esto. Los números flotantes y las entradas son un dolor en el...

Si no desea "otro paquete más", puede simplemente inspeccionar el código y obtener algunas ideas: https://github.com/changhuixu/ngx-digit-only/blob/main/projects/uiowa/digit- only/src/lib/digit-only.directive.ts