数字格式的错误行为

Question

因此，我使用 NumberFormat 库来构建占位符，但它没有按照我想要的方式工作，而且我没有找到原因。输入字段的行为很奇怪。应该充当占位符的“$0”充当字符，因此如果用户键入“120”，则金额实际上将是“1200”。

以下是有关其工作原理的视频： https://media.giphy.com/media/ sptBQiYqQr3B54rJFu/giphy.gif

但是正确的行为是，当存在 0 并且用户输入一个值时， 0 应该被替换（你可以检查谷歌计算器，它就是这样做的）。

<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="#### #### #### ####"
/>