0
162
ViewsPermitir número de tipo de entrada solo un número/flotante entre 0-1
Quiero tener un número de input que permita cualquier valor flotante entre 0 y 1, incluidos ambos números enteros. Pero está resultando bastante complicado obtener el retroceso para eliminar un número, ya que viene como NaN
Tengo esto:
const [rate, setRate] = useState<number>(0) const addRate = (num: number) => { if (typeof num !== 'number') { setRate(0) } else { setRate(num) } } ... <input type='number' value={rate} onChange={e => addRate(parseFloat(e.target.value)} />3 answers
Answer question0
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))} /> ); } 
0
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!
0
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