可以在ReactJ中的输入中放置超过3个数字

Question

我在ReactJS代码上有一个大问题。我有一个仅输入数字“ EC”的输入是一个数字。用户可以直接输入他的数据，也可以按按钮 +或 - 添加或删除1000。按钮+/-工作，但我的输入无法工作。

错误：

• 当我在键盘中按DELETE时，2000的“ 000”都会一次删除，
• 我无法将4个数字放在输入中
• 当我删除所有内容时， 在输入中。

我尝试了很多事情，例如：

• 将我的输入传递到type ='number'中，
• 将函数直接放在onChange {}
• put number（）而不是parseint（）

中，没有任何可行。你能帮助我吗 ？

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;

Answer 1

好的，我删除了您的tolocalestring（），这是阻止您输入4个以上数字的原因。

然后，我更改了您的Onchange功能。您正在转换为一个字段值的数字。但是您无法将无效的值转换为整数。因此，我有条件地更新了状态：

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

如果您字段的值长度大于一个（因此您的字段不为空），则设置状态。但是否则，将状态设置为0。

这为您提供了一个工作字段，但是如果您的EC变量等于0，则输入字段的内部为0（我想您不想要）。

我将您的输入的值属性更改为value = {ec＆gt; 0？ ec.tostring（）：“”}
（如果EC＆gt; 0，请放置EC，否则将任何内容放在里面）

这是完整的代码：

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;