Javascript 在React JS中，如何在keyup事件中将数字转换为逗号分隔的值

在react 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);
}

构造函数：

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>

收入来源
月收入（AED/月）
其他月收入（AED/月）

---

提前谢谢

我想你在找这样的东西：

const format\u number=函数（数字、前缀、千位分隔符、十进制分隔符）{
千分位=千分位| |'，'；
十进制分隔符=十进制分隔符| |'；
const regex=new RegExp（“[^”+十进制分隔符+'\\d]，“g”）；
让number_string=number.toString（）.replace（regex.）.toString（）；
让split=number\u string.split（十进制分隔符）；
常量千=拆分[0]。toString（）
.split（“”）//将整数部分拆分为单个字符
.reverse（）//颠倒顺序
.map（（数字、索引）=>{
//每三个字符后添加一个逗号
返回（索引>0&&索引%3==0）？数字+，'：数字；
})
.reverse（）//将其放回原始顺序
.join（“”）；//并使其再次成为字符串
让结果=拆分[1]！=未定义的千分位数+小数分隔符+拆分[1]：千分位数；
返回前缀==未定义的结果：（结果前缀+结果：“”）；
}
日志（格式_编号（1.02，“$”）；
日志（格式_编号（1000.02，“%”，“：”）；
控制台日志（格式_编号（1000000.02））；
常数测试=[
1.
10,
100,
1000,
10000,
100000,
1000000,
10000000,
100000000,
1000000000,
10000000000,
];
console.log（tests.map（num=>format_number（num））

你能举个例子说明输入示例所需的输出吗？我更新了描述，请检查请找到给定的URL实际上有一个表单，我需要如下2件事1）当用户在任何文本框中键入数字时，数字转换为逗号分隔。2） 在第46行中，我使用javascript“document.getElementbyId”在一个div块中添加了框的计算，我可以使用setState应用这个吗？@MuhammadOwais这两个都是可能的。看见