Формат ввода чисел с шаблоном #, ####

Question

Я хотел бы достичь формата ввода чисел, который всегда следует шаблону #,####. Это не простая маска, если значение равно 1, я должен видеть 1,000, если 20.32 должно видеть 20,3200 и т. Д.

Я попробовал Формат числа реакции :

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

Почему бы не использовать свойство format в качестве строки?

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

Answer 2

Вы можете считать это ссылкой для вашего требования.
Этот метод форматирует введенный номер (4400000) => (IDR 4 400 000)

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