React中强制数字输入保留两位小数并始终显示两位小数

Question

我希望有一个输入框，始终限制输入为两位小数，并显示两位小数。

我知道这是对以下问题的跟进： 强制数字输入仅具有两个小数位 但是当我在React中实现时，如果数字为3，则不会格式化为2位小数。好像它忽略了step属性。

- Philip Pegden

---

当您输入类似于3.14159这样的内容时，它能正常工作吗？您使用火狐浏览器吗？火狐浏览器会使用toFixed截去零 https://www.zigpress.com/2016/12/05/javascript-tofixed-does-not-work-in-number-fields-on-firefox/ - kugtas

Answer 1

我在这里为Chrome写了一个工作示例：

https://codesandbox.io/s/xo2x1qnw0w

对于Firefox浏览器，.toFixed()方法没有正确工作，因为它会截断不显著的零。但是对于像42.98763这样的数字确实有效。

- kugtas

---

这一切都非常顺利。谢谢。然而，当我将其与react-redux-form集成时，如果更新小数部分，则光标总是被抛到后面，我会尝试看看是否可以制作演示来展示这个问题。 - Philip Pegden

不够好，因为它不支持在输入时进行编辑。 - Sahin

Answer 2

这是我的货币输入解决方案...它不会在用户输入少于两个小数位时强制要求输入两个小数位，因为这样会让用户输入变得困难。

import { useRef } from 'react'

function handleMoneyChange(e){
    if(e.key !== "Backspace"){
        if(offerAmtRef.current.value.includes('.')){
            if(offerAmtRef.current.value.split('.')[1].length >= 2){
                var num = parseFloat(offerAmtRef.current.value);
                var cleanNum = num.toFixed(2);
                offerAmtRef.current.value = cleanNum;
                e.preventDefault();
            }
        }
    }
}

<input
    type="number"
    step=".01"
    ref={offerAmtRef}
    defaultValue={offerAmtRef.current}
    onKeyDown={(e)=> {
        handleMoneyChange(e)
    }}
/>

- August Kimo

---

这个对我来说特别有效。 - Phạm Quang Mẫn

Answer 3

就像这样做

const handleChange = (evt) => {
  const { value } = evt.target;

  // check if value includes a decimal point
  if (value.match(/\./g)) {
    const [, decimal] = value.split('.');

    // restrict value to only 2 decimal places
    if (decimal?.length > 2) {
      // do nothing
      return;
    }
  }

  // otherwise, update value in state
  setPrice(value);
}

<input type="number" value={price} onChange={handleChange} />

- Haseeb Anwar