ReactJS：一位数字输入可以以多个“ 0”结尾

问题描述

基本上，我希望有一个只有一位的小方框，直到您尝试输入多个“ 0”，然后在该方框中，多个0000持续存在，它才能“正常工作”。

代码

const InputBox = () => {
  const [value,setValue] = useState(0);

  const handleChange = el => {
    const newValue = el.target.value;
    console.log(newValue);
    const lastNumber = parseInt(
      newValue.toString().slice(-1),);
    console.log(lastNumber);
    setValue(lastNumber);
  };

  return (
    <input
      type='number'
      pattern='[0-9]'
      min='0'
      max='9'
      id='numberInput'
      maxLength={1}
      minLength={1}
      value={value}
      onInput={handleChange}
      // onChange={handleChange}
      className='inputBox'
    />
  );
};

export default InputBox;

如何制作，以便我随时只有一位数字？

解决方法

• 不需要解析为int或字符串，只需切片并设置值即可。
• minLength和maxLength在<input type="number">中不起作用。

const InputBox = () => {
  const [value,setValue] = useState(0);

  const handleChange = (el) => {
    let newValue = el.target.value;
    if (newValue.length > 1) {
      newValue = newValue.slice(0,1);
    }
    setValue(newValue);
  };

  return (
    <input
      type="number"
      pattern="[0-9]"
      min="0"
      max="9"
      id="numberInput"
      value={value}
      onInput={handleChange}
      className="inputBox"
    />
  );
};

,

这可能会解决

const handleChange = el => {
    const newValue = el.target.value;
    const lastNumber = newValue.replace(/[^0-9]/g,'')
    setValue(lastNumber);
  };

  return (
    <input
      type="text" maxlength="1" 
      value={value}
      onInput={handleChange}
    />
  );

,

如果您不介意将状态强制转换为状态字符串（在需要数字类型进行计算时总是可以Number(value) ），那么您可以简单地将最后一个切片值的char，如果最后变成假（''，0，null，undefined，NaN），则值回退到{{1} }，以便在分配给0的{​​{1}}道具时允许强制返回"0"。另外，value | input | minLength属性仅在以表单进行字段验证时起作用。

maxLength

pattern