Tengo un gran problema con mi código ReactJS. Tengo una entrada para ingresar solo el número "EC" que se supone que es un número. El usuario puede ingresar sus datos directamente en el puesto o puede presionar el botón + o - para agregar o quitar 1000. El botón +/- funciona pero mi entrada no funcionará.
Errores:
Probé muchas cosas como:
Nada funciona. Me puedes ayudar ?
function Resistance() { const [EC, setEC]= React.useState(2000) function handlePressEC() { const testEC=EC-1000 if(testEC<=0) { setEC(0) } else { setEC(testEC) } } function handleChangeEC(e) { const EC = parseInt(e.target.value) setEC(EC) console.log(EC) } return ( <div> <div className='flexLigneOF flexLigneV'> <div className='textOF'>Economie de charge</div> <div className='flexSaisie'> <button className='buttonPM' onClick={handlePressEC} > <div className='TextPM'> - </div> </button> <input className='inputResi'value={EC.toLocaleString().toString()} onChange={handleChangeEC} keyboardType='number-pad'/> <button className='buttonPM' onClick={() => {setEC(parseInt(EC)+1000)}}> <div className='TextPM'> + </div> </button> </div> </div> </div> ); } export default Resistance;De acuerdo, eliminé su toLocaleString() que es lo que le impedía ingresar más de 4 números.
Luego cambié un poco tu función onChange. Estabas convirtiendo a un número el valor de tu campo. Pero no puede convertir un valor nulo en un número entero. Así que actualicé el estado condicionalmente:
function handleChangeEC(e) { if (e.target.value.length > 0) { let newEc = parseInt(e.target.value); setEC(newEc); } else { setEC(0); } }Si la longitud del valor de su campo es mayor que uno (por lo que su campo no está vacío), establezca el estado. Pero de lo contrario, establezca el estado en 0.
Esto le brinda un campo de trabajo, pero si su variable EC es igual a 0, el campo de entrada tiene un 0 dentro (que supongo que no desea).
Cambié el atributo de valor de su entrada a value={EC > 0 ? EC.toString() : ""} (Si EC > 0, ponga EC, de lo contrario no ponga nada adentro)
Aquí está el código completo:
import { useState } from "react"; function Resistance() { const [EC, setEC] = useState(2000); function handlePressEC() { const testEC = EC - 1000; if (testEC <= 0) { setEC(0); } else { setEC(testEC); } } function handleChangeEC(e) { if (e.target.value.length > 0) { let newEc = parseInt(e.target.value); setEC(newEc); } else { setEC(0); } } return ( <div> <div className="flexLigneOF flexLigneV"> <div className="textOF">Economie de charge</div> <div className="flexSaisie"> <button className="buttonPM" onClick={handlePressEC}> <div className="TextPM"> - </div> </button> <input className="inputResi" value={EC > 0 ? EC.toString() : ""} onChange={handleChangeEC} /> <button className="buttonPM" onClick={() => { setEC(parseInt(EC) + 1000); }} > <div className="TextPM"> + </div> </button> </div> </div> <div>EC : {EC}</div> </div> ); } export default Resistance;