React实现添加千分位的Input

有这样一个需求，用户在input中输入金额，为了展示效果，需要：

• 用户输入时，自动添加千分位
• 输入结束，提交时仍提交数字（不包含千分位）

因为最近正在学习React.js，就试着练练手，用React实现满足上述需求的input组件。

千分位

维基百科对千分位有清楚的说明，这里只举一个例子。

123456.9876

的千分位是

123,456.987,6

另外千分位可以用逗号，也可以用空格。这里就不做区分，都只用逗号表示。

对数字添加千分位的js实现也有很多，这里就选最简单的一种。

添加千分位：

var amount = '123456.9876';
var amountThusandth = amount.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,");

去除千分位：

var amountThusandth = '123,456.987,6';
var amount = amountThusandth.replace(/,/g, '');

不过需要提醒一下，不要使用toLocaleString()，toLocaleString函数无法对小数部分添加千分位，并且在不同浏览器的效果不同。

实现

React.js对我来说，是一种全新的思考套路，如果不熟悉React的话，非常建议先阅读下面这两篇文章：

1. React.js 的介绍 - 针对了解 jQuery 的工程师
2. React编程思想

对输入的数字添加千分位这个问题，实际上是一个很典型的问题：

• 用一个state来保存添加千分位的结果
• input的value由state设置
• 在input的onChange中，处理用户输入的值，并通过this.setState更新

Demo

{% jsfiddle hqaz7kgh %}

参考

小數點 - 维基百科
从千分位格式化谈JS性能优化
React.js 的介绍 - 针对了解 jQuery 的工程师
React编程思想