javascript - 输入输入值时如何正确使用 toFixed

Question

我想保留数字后面的两位数字，即 2.89 或 2.00。谷歌把我带到this answer使用.toFixed(2)。

虽然效果很好，但在输入 input 值时效果不佳:

const [ value, setValue] = useState()

const onChange = (value) => {
  const float = parseFloat(value)
  setValue(float.toFixed(2))
}


<input
  type="number"
  value={value}
  onChange={({ target }) => onChange(target.value)}
/>

如果我输入“300”，输入值将停止在“3.00”。我必须将光标移到“3”之前才能输入“300”。最好的方法是什么？

我希望该值始终显示 .33、.00 等，同时具有“自由类型”的能力。当我输入这个问题时，我觉得我需要使用 onBlur 将值转换为 .toFixed 而不是在输入时？

Answer 1

您可以使用onBlur并在设置值时添加一些检查

export default function App() {
  const [value, setValue] = useState('');
  const onChange = (v) => {
    if (!Number.isNaN(v)) {
      setValue(v);
    }
  };

  return (
    <div className="App">
      <input
        type="number"
        value={value}
        step="1"
        onChange={({ target }) => onChange(target.value)}
        onBlur={e => setValue(Number(value).toFixed(2))}
      />
    </div>
  );
}