React.js material-ui：如何將文本字段格式化為數量

Question

我有一個 material-ui 文本字段，它是金額字段

我想格式化它，以便在輸入時，文本字段有千位分隔符和小數點。 還有獎金，如果輸入在右側（就像在計算器中一樣）

例如，用戶類型 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-format可以像這樣與 MaterialUI TextField集成：

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

請注意，我使用react-number-format中的onValueChange 。 在這里，您會得到values object ，它同時具有未格式化的value和格式化的formattedValue 。 您很可能想要 state 中的裸值。

Answer 3

如果有人遇到這個問題，IMO @alexanderdavide 解決方案是最簡單的，也可以與 react-currency-format 庫一起使用：

import { TextField } from '@mui/material';

 <CurrencyFormat
            customInput={TextField}
            thousandSeparator
            prefix="$"
            decimalScale={0}
            placeholder="Amount"
            label="Amount"
            onChange={handleNewAmount}
        />