数字格式的错误行为

Question

所以我正在使用 NumberFormat 库来构建占位符，但它无法按照我希望的方式工作，而且我也找不到原因。输入字段的行为很奇怪。本应充当占位符的“$0”充当字符，因此如果用户键入“120”，金额实际上将是“1200”。

这里有一段视频展示了它是如何工作的：https://media.giphy.com/media/sptBQiYqQr3B54rJFu/giphy.gif

但是正确的行为是，当有 0 并且用户输入一个值时，应该替换 0（您可以检查 google 计算器，它会这样做）。

<NumberFormat
                defaultValue={undefined}
                value={payoutInputValue}
                displayType="input"
                thousandSeparator
                decimalScale={2}
                prefix={getCurrencySymbol(currency)}
                allowLeadingZeros={false}
                allowNegative={false}
                getInputRef={numberInputRef}
                onValueChange={(values) =>
                  setPayoutInputValue(values?.floatValue || undefined)
                }
                disabled={disabled || isLoading}
                isAllowed={isDrawAmountAllowed(0, currency)}
                required
              />

和 setPayoutInputValue 函数：

const [payoutInputValue, setPayoutInputValue] = useState<number>(
    payout === 0 && isAmountParamValid ? amountParamParsed : payout
  );

我对 React 的经验不多，所以如果你能用基本术语回答，那就太棒了。谢谢！

编辑：设法让它发挥作用！添加了占位符属性和 value={undefined}

Answer 1

尝试为 NumberFormat 设置 hintText 属性，同时给出初始值 undefined。

<NumberFormat
  hintText="Some placeholder"
  value={this.state.card}
  customInput={TextField}
  format="#### #### #### ####"
/>

数字格式的错误行为

wrong behaviour of number format

javascript

reactjs

number-formatting

visual-web-developer