React.js Material-ui：如何将文本字段格式化为金额

Question

我有一个material-ui Textfield，它是金额字段

我想对其进行格式化，以便在键入时，文本字段具有千位分隔符和小数点。还有额外的好处，如果输入位于右侧（就像计算器一样）

例如，用户输入 1000000 文本字段应显示 1,000,000.00

参见下面的代码：

<TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        type="text"
                        id="debitAmount"
                        label="Amount"
                        value={debitAmount}
                        onChange={(e) => setDebitAmount(e.target.value)}
                        InputProps={{
                          classes: { input: classes.textfield1 },
                        }}
                      />

我正在尝试使用一个名为的库react-number-format，但由于文档缺少示例，我很难将其应用到我的文本字段中

我也尝试使用toLocaleString("en")哪个是有效的，但是文本字段最多只能显示 4 个数字，我不知道为什么

Answer 1

Ciao，这是一个工作示例。我使用了与 Material-ui 文档（简化）中报告的完全相同的示例，使用react-number-format， 并显示我使用的固定小数位数toFixed(2)。

Answer 2

react-number-formatTextField可以像这样与 MaterialUI 集成：

<NumberFormat
  customInput={TextField}
  onValueChange={(values) => setNumberFormatState(values.value)}
  value={numberFormatState}
  // you can define additional custom props that are all forwarded to the customInput e. g.
  variant="outlined"
/>

请注意，我使用onValueChangefrom react-number-format. 在这里，您将获得values同时具有未格式化value和格式化的对象formattedValue。您很可能想要状态中的裸值。