В React JS, Как преобразовать числа в значения, разделенные запятыми, по событию keyup - PullRequest
Новая
       6

В React JS, Как преобразовать числа в значения, разделенные запятыми, по событию keyup

0 голосов
/ 28 июня 2018

В реагирующем Js, на самом деле у меня есть большая форма, в которой много текстовых полей для вычисления числа, поэтому я хочу создать глобальную функцию для преобразования чисел в значения, разделенные запятыми, а также запретить пользователю вводить буквы алфавита.

Функция числового формата: 

format_number(number, prefix, thousand_separator, decimal_separator) {
  let thousand_separator = thousand_separator || ',';
  let decimal_separator = decimal_separator || '.';
  let regex     = new RegExp('[^' + decimal_separator + '\\d]', 'g');
  let number_string = number.replace(regex, '').toString();
  let split   = number_string.split(decimal_separator);
  let rest    = split[0].length % 3;
  let result      = split[0].substr(0, rest);
  let thousands = split[0].substr(rest).match(/\d{3}/g);

  if (thousands) {
      separator = rest ? thousand_separator : '';
      result += separator + thousands.join(thousand_separator);
  }
  let result = split[1] != undefined ? result + decimal_separator + split[1] : result;
  return prefix == undefined ? result : (result ? prefix + result : '');
  }

Конструктор: 

constructor(props){
    super(props);
    this.state={
        monthlyIncome: '',
        otherMonthlyIncome: '',
    }
    this.format_number = this.format_number.bind(this);
}

Форма начальной загрузки: 

<h4>Sources of Income</h4>
                    <div className="form-group col-md-6 col-sm-6 col-xs-12">
                        <label>Monthly Income (AED / Month)</label>
                        <input type="text" className="form-control" value={this.state.monthlyIncome} id={'monthlyIncome'} onChange={this.format_number}/>
                    </div>
                    <div className="form-group col-md-6 col-sm-6 col-xs-12">
                        <label>Other Monthly Income (AED / Month)</label>
                        <input type="text" className="form-control" value={this.state.otherMonthlyIncome} id={'otherMonthlyIncome'} onChange={this.format_number}/>
                    </div>

Заранее спасибо

1 Ответ

0 голосов
/ 29 июня 2018

Я думаю, вы ищете что-то вроде этого: 

const format_number = function (number, prefix, thousand_separator, decimal_separator) {
    thousand_separator = thousand_separator || ',';
    decimal_separator = decimal_separator || '.';
    const regex = new RegExp('[^' + decimal_separator + '\\d]', 'g');
    let number_string = number.toString().replace(regex, '').toString();
    let split = number_string.split(decimal_separator);
    const thousands = split[0].toString()
            .split('')  // split the integer portion into individual characters
            .reverse()  // reverse the order
            .map((digit, index) => {
                // add a comma after every 3rd character
                return (index > 0 && index % 3 === 0) ? digit + ',' : digit;
            })
            .reverse()  // put it back into the original order
            .join('');  // and make it a string again

    let result = split[1] != undefined ? thousands + decimal_separator + split[1] : thousands;
    return prefix == undefined ? result : (result ? prefix + result : '');
}

console.log(format_number(1.02, '$'));
console.log(format_number(1000.02, '%', ':'));
console.log(format_number(1000000.02));

const tests = [
    1,
    10,
    100,
    1000,
    10000,
    100000,
    1000000,
    10000000,
    100000000,
    1000000000,
    10000000000,
];

console.log(tests.map( num => format_number(num)))

Если это не то, что вы ищете, пожалуйста, обновите ваш вопрос конкретными примерами ввода и вывода (то есть ввод 1000 и вывод ???).

...