Javascript 当num>；时，在num旁边添加/填充0；使用React输入10英寸的数字

我研究并查看了一些问题，如，但我找不到任何涉及输入数字类型的问题。每当输入中的数字小于10时，我只想填充0，即使我仍在滚动，我也希望填充0。这是我的密码：

import React from 'react';

const SetTimer = () => {
    return (
        <div className='grid-inputs'>
            <div>
                <label htmlFor='hours'>Hours</label>
                <input
                    name='hours'
                    type='number'
                    min='0'
                    max='99'
                    // onChange={(e) => setHours(e.target.value)}
                />
            </div>
            <div>
                <label htmlFor='minutes'>Minutes</label>
                <input
                    name='minutes'
                    type='number'
                    min='0'
                    max='59'
                    // onChange={(e) => setMinutes(e.target.value)}
                />
            </div>
            <div>
                <label htmlFor='seconds'>Seconds</label>
                <input
                    name='seconds'
                    type='number'
                    min='0'
                    max='59'
                    // onChange={(e) => setSeconds(e.target.value)}
                />
            </div>
        </div>
    );
};

export default SetTimer;

从“React”导入React；
常量设置计时器=（）=>{
返回(
小时
设置小时数（e.target.value）}
/>
会议记录
setMinutes（e.target.value）}
/>
秒
设置秒（e.target.value）}
/>
);
};
导出默认设置计时器；

我可以在输入字段之外执行此操作，例如，在分钟内执行此操作（顺便说一句，这只是另一个组件的摘录）：

{minutes<10？`0${minutes}`:minutes}

---

但我不能在输入数字字段中这样做，同时仍然滚动数字值。请提供帮助。

将您的输入转换为受控输入，并填充输入的

值

value={hours.padStart(2, '0')}


代码

const SetTimer=（）=>{
const[hours，setHours]=useState（“”）；
const[minutes，setMinutes]=useState（“”）；
const[seconds，setSeconds]=useState（“”）；
返回(
小时
设置小时数（e.target.value）}
/>
会议记录
setMinutes（e.target.value）}
/>
秒
设置秒（e.target.value）}
/>
);
};


value={hours.padStart(2, '0')}

const SetTimer = () => {
  const [hours, setHours] = useState("");
  const [minutes, setMinutes] = useState("");
  const [seconds, setSeconds] = useState("");
  return (
    <div className="grid-inputs">
      <div>
        <label htmlFor="hours">Hours</label>
        <input
          name="hours"
          type="number"
          min="0"
          max="99"
          value={hours.padStart(2, "0")}
          onChange={(e) => setHours(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="minutes">Minutes</label>
        <input
          name="minutes"
          type="number"
          min="0"
          max="59"
          value={minutes.padStart(2, "0")}
          onChange={(e) => setMinutes(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="seconds">Seconds</label>
        <input
          name="seconds"
          type="number"
          min="0"
          max="59"
          value={seconds.padStart(2, "0")}
          onChange={(e) => setSeconds(e.target.value)}
        />
      </div>
    </div>
  );
};