CODEWITHSUNDEEP
javascriptreactjsinputonchange
Aliénor
Aliénor

Reputation: 93

Can't put more than 3 numbers in an input in ReactJS

I've got a big issue on my ReactJS code. I have an input to enter only number "EC" is suppose to be a number. The user can enter his data directly in the put or he can press the button + or - to add or remove 1000. The button +/- works but my input wont work.

Errors :

I tried a lot of things such as:

Nothing works. Can you help me ?

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;

Upvotes: 0

Views: 683

Answers (1)

Louis Lecouturier
Louis Lecouturier

Reputation: 408

Okay, I removed your toLocaleString() which is the thing that was preventing you from entering more than 4 numbers.

Then I changed a bit your onChange function. You were converting to a number the value of your field. But you can't convert a null value to an integer. So I updated the state conditionally :

  function handleChangeEC(e) {
    if (e.target.value.length > 0) {
      let newEc = parseInt(e.target.value);
      setEC(newEc);
    } else {
      setEC(0);
    }
  }

If the length of the value of you field is greater than One (So your field is not empty) then set the state. But else, set the state to 0.

This gives you a working field but if your EC variable is equal to 0, the input field has a 0 inside (which I guess you don't want).

I changed the value attribute of your input to value={EC > 0 ? EC.toString() : ""} (If EC > 0, put EC, else put nothing inside)

Here's the complete code :

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;

Upvotes: 1

Related Questions