强制数字输入有两位小数，并在 React 中始终显示两位小数答案

【问题标题】：Force number input to have two decimal places and always show two decimals in React强制数字输入有两位小数，并在 React 中始终显示两位小数
【发布时间】：2018-01-19 12:33:20
【问题描述】：

我想要一个输入字段，始终将输入限制为两位小数，但也显示两位小数，

我知道这是对这个问题的后续：

Force number input to have two decimal places and ONLY two

但是当我在 React 中实现它时，它不会格式化为 2 位小数，如果说数字是 3。就好像它忽略了 step 属性。

【问题讨论】：

当您输入类似 3.14159 的内容时它是否有效？你用火狐吗？ Firefox 确实使用 toFixed zigpress.com/2016/12/05/… 切断了零

标签： javascript reactjs

【解决方案1】：

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

https://codesandbox.io/s/xo2x1qnw0w

对于 Firefox，.toFixed() 方法无法正常工作，因为它会切断非重要的零。但它确实适用于像 42.98763

这样的数字

【讨论】：

这一切都很好。谢谢你。但是，现在，当我将它与 react-redux-form 集成时，如果更新小数部分，我会遇到一个问题，即光标总是被抛到后面。我会看看我是否可以得到一个演示来展示这个。

【解决方案2】：

这是我的货币输入解决方案。在输入超过 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)
    }}
/>

【讨论】：

【解决方案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} />

【讨论】：