React中如何实现数字输入框输入值自动乘60后存储

• 核心需要处理两个逻辑节点，否则会出现输入值显示异常的问题：
  • 存储逻辑：onChange事件拿到用户输入的有效数值后，乘以60再存入表单状态
  • 回显逻辑：输入框绑定value时，将存储的数值除以60后展示，保证用户看到的是自己输入的原始值
• 边界兼容：需要处理空输入、非数字输入的异常场景，避免出现NaN导致页面报错

常见踩坑提示：如果只修改onChange的赋值逻辑、不做value的反向转换，会出现输入1后输入框自动跳转为60的异常，属于React受控组件值绑定的典型问题

修正后完整代码 #

import { useState } from 'react';

const Account4 = () => {
  // 表单状态，from字段最终存储输入值*60的计算结果
  const [form, setForm] = useState({
    from: 0
  });

  return (
    <div>
      <label>From</label>
      <input
        type="number"
        placeholder="hh:mm 24 hr format"
        // 回显时做反向计算，展示用户实际输入的值
        value={form.from ? form.from / 60 : ''}
        onChange={e => {
          const inputValue = e.target.valueAsNumber;
          setForm({
            ...form,
            // 非有效数字统一存0，有效值乘60后存储
            from: isNaN(inputValue) ? 0 : inputValue * 60
          })
        }}
      />
    </div>
  )
}

可选优化项 #

• 如果需要支持小数时间输入，可以给input标签添加step="0.1"属性，放开小数输入限制
• 如果业务要求不允许输入负数值，可以在onChange逻辑中增加判断，过滤小于0的输入值
• 如果需要保留输入为空的状态，可以把初始值和非法值的存储逻辑调整为null，按需适配业务校验规则即可

内容的提问来源于stack exchange，提问作者siddhant kumar