使用模式＃，####

Question

我想提供一种始终遵循#,####模式的数字输入格式。这不是一个简单的掩码，如果值是1我应该看到1,000，如果20.32应该看到20,3200，依此类推。

我尝试了react-number-format：

formatCurrencyAmount(val) {
  var str = String(val)
  var unit_separator_index = str.indexOf('.')

  if (unit_separator_index < 0) return `${str},0000`

  var str_end = str.substring(unit_separator_index + 1, str.length - 1)
  var str_begin = str.substring(0, unit_separator_index - 1)

  if (str_end.length == 4) return `${str_begin},${str_end}`
  else if (str_end.length > 4) return `${str_begin},${str_end.padEnd(4, '0')}`
  else return `${str_begin},${str_end.substring(0, 4)}`
}

<NumberFormat
  value={ this.state.crypto_amount }
  format={ this.formatCurrencyAmount.bind(this) }
  allowNegative={ false }
  onValueChange={ this.handleCryptoAmountChange.bind(this) }
/>

没有成功。

我怎么能做到这一点？

Answer 1

您可以将其视为您的要求的参考。
此方法格式化输入数字（4400000）=>（IDR 4,400,000）

    calculateTotal = (total) => {
    return `IDR ${(total)
    .toString()
    .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")}`;
    };

Answer 2

为什么不将format属性用作字符串？

<NumberFormat 
    value={ this.state.crypto_amount } 
    displayType={'text'}
    format="#,####" 
/>