Actualmente estoy tratando de hacer una entrada que tomará números decimales y se formateará automáticamente con miles de separadores al mismo tiempo.
Sin embargo, lo único que puedo hacer con el formato automático del separador de miles es establecer el tipo de entrada = 'texto', que no puedo ingresar números decimales. Donde establecer tipo de entrada = 'número' me permite ingresar un número decimal pero no se formateará automáticamente con miles de separadores
Aquí está el código:
<input className="cal__section__form__container--input" placeholder={0} type="text" value={displayVal || ""} onChange={(e) => { const targ = e.target.value.replace(/\D/g, "") || 0; const displayVal = parseFloat(targ).toLocaleString(undefined, { maximumFractionDigits: 2, }); console.log(displayVal); }}/>
Nunca estás actualizando tu estado displayVal. También es una buena práctica manejar la lógica de eventos fuera de onChange. Así es como debería verse su código:
const handleChange = (e) => { const value = e.target.value; const clean = value.replace(/,/g, ""); const regex = /^[0-9]*\.?[0-9]*$/; if (value && clean.match(regex)) { if (!value.includes(".")) { const formatted = new Intl.NumberFormat().format(parseFloat(clean)); setDisplayVal(formatted); } else { setDisplayVal(value); } } else { setDisplayVal(""); } }; <input className="cal__section__form__container--input" placeholder={0} type="text" value={displayVal} onChange={handleChange} />