在很多业务场景中，产品要求我们实现一个交【关注微信公众号：wwwtangshuangnet】【转载请注明来源】互：用户输入数字时，将数字按千分位分隔。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net一般我们会采用,作为分隔符，例如 【访问 www.tangshuang.net 获取更多精彩内容】100,000,000，但是react或者说web没有原生的方著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。法实现这个效果，因此，我们必须自己实现这【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】一需求。
我接到需求之后，去市面上找了一圈儿，以a【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ntd的rc-input-number为【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。例，核心代码相对比较少一些，功能覆盖了我本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】的需求，但是很可惜，在某些处理细节上没有著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】覆盖全（例如在逗号后面删除）。而外网搜索【原创内容，转载请注明出处】【版权所有，侵权必究】得到的一个被多次提及的组件input-n【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。umber-format，则功能太过复杂【原创内容，转载请注明出处】原创内容，盗版必究。，代码量巨大，超出了我的承受能力。我最终【版权所有，侵权必究】【作者：唐霜】决定自己实现一个组件，目标是以最少的代码【版权所有，侵权必究】【原创不易，请尊重版权】量，直接了当的（不考虑其他场景下的通用性【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】）实现需求。
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【版权所有，侵权必究】接下来，我就简单的阐述我的实现过程。未经授权，禁止复制转载。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】接口设计著作权归作者所有，禁止商业用途转载。
【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【本文首发于唐霜的博客】新的组件应该与原生组件的接口风格保持一致【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】，在无法直接满足的情况下，也应该变相支持【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】。因此，我在设计时，只用一个input，未经授权，禁止复制转载。【转载请注明来源】来完成所有交互过程。
【未经授权禁止转载】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【本文受版权保护】<InputNumber
value={value}
onChange={e => setValue(e.target.value)}
placeholder="请输入数字"
max={100}
min={0}
inputRef={el}
/>
完成开发之后，我发现input[type【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net=number]支持step属性，但是如【未经授权禁止转载】本文作者：唐霜，转载请注明出处。果需要支持微调功能，就必须自己再模拟两个【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】按钮，导致复杂html结构。所以，最终我【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net只能放弃支持step属性。inputRe【本文受版权保护】【版权所有，侵权必究】f则是代替原来的ref属性，因为reac【本文受版权保护】【版权所有，侵权必究】t会默认把ref绑定到组件上，所以只能找转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。替代方案。还有一个点，由于格式化数据输入【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】框是使用input[type=text]【作者：唐霜】原创内容，盗版必究。模拟的，因此，在手机上，无法直接唤起数字本文作者：唐霜，转载请注明出处。【转载请注明来源】键盘，也是一大损失。
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。数字的格式化【本文受版权保护】
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【作者：唐霜】【作者：唐霜】用户在输入的过程中，需要实时的将数字按千【未经授权禁止转载】【原创内容，转载请注明出处】分位分隔符进行格式化。如果你用过antd【本文受版权保护】著作权归作者所有，禁止商业用途转载。的组件，它会要求你传入一个formatt【作者：唐霜】著作权归作者所有，禁止商业用途转载。er和parser来决定怎么做格式化，以【原创内容，转载请注明出处】【原创内容，转载请注明出处】及接收值之前怎么处理。我为了减少代码，就转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】写死用,进行分隔。效果如下：原创内容，盗版必究。
你可以看到，在第一次输入时，它会自动格式【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。化。同时支持删除时格式化。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【本文受版权保护】【转载请注明来源】为了在展示时是格式化的，而读取时是正常数【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。字，必须做一个类型转化过程。展示时，先格【转载请注明来源】【作者：唐霜】式化；读取时，是反转为数字的值，通过on【本文受版权保护】著作权归作者所有，禁止商业用途转载。Change抛出。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netfunction num2str(num) {
// 完成数字到字符串格式化
}
function str2num(str) {
// 将格式化后的字符串转化为数字
}
function InputNumber(props) {
const { value, onChange } = props
const handleChange = (e) => {
const num = str2num(e.target.value)
onChange(num)
}
const str = num2str(value)
return <input value={str} onChange={handleChange} />
}
但这样会有一个问题，就是我们的onCha【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。nge属性，只能直接接收数字，而无法接受著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nete。于是我做了一个特殊处理，通过Prox【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。y代理e，让外部在读取e.target.【原创不易，请尊重版权】【未经授权禁止转载】value时，读到的是反转为数字的值。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】const responseChange = (e, num) => {
const event = new Proxy(e, {
get(_, key) {
const value = _[key]
if (key === 'target') {
return new Proxy(value, {
get(_, key) {
const value = _[key]
if (key === 'value') {
return num
}
else {
return typeof value === 'function' ? value.bind(_) : value
}
},
})
}
else {
return typeof value === 'function' ? value.bind(_) : value
}
},
})
onChange(event)
}
然后再替换handleChange为：本文作者：唐霜，转载请注明出处。
【本文首发于唐霜的博客】未经授权，禁止复制转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】const handleChange = (e) => {
const num = str2num(e.target.value)
responseChange(e, num)
}
这样就解决了外部读取e.target.v著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netalue时，读取真正需要的数据的问题。
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】【作者：唐霜】转载请注明出处：www.tangshuang.net非受控转载请注明出处：www.tangshuang.net
未经授权，禁止复制转载。【本文首发于唐霜的博客】【未经授权禁止转载】【未经授权禁止转载】上面InputNumber的实现，是完全【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。受控组件的写法。但是，默认情况下，我们也本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。应该支持非受控组件（即不传onChang【转载请注明来源】【本文首发于唐霜的博客】e来更新value）。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】<InputNumber defaultValue={30} min={0} max={100} />
这种情况下，我们也要支持格式化展示输入数原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。字。那通过上面的实现就不可以了。此时，必本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net须借助一个内部状态来完成。为了同时兼容受原创内容，盗版必究。原创内容，盗版必究。控与非受控，代码结构要做很大的变化。
本文作者：唐霜，转载请注明出处。【作者：唐霜】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】function InputNumber(props) {
const { defaultValue, value, onChange } = props
const isControlled = 'value' in props
const [text, setText] = useState(() => !isControlled ? num2str(defaultValue) : '')
useEffect(() => {
if (isControlled) {
const next = num2str(value)
setText(next)
}
}, [value])
const handleChange = (e) {
...
if (onChange) {
responseChange(e, num)
}
if (!isControlled) {
setText(e.target.value)
}
}
return <input value={text} onChange={handleChange} />
}
在用户输入的时候，即使是非受控状态，也可【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。以通过text这个状态值来实时的改变内容著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。。这样，就算非受控情况下，也能做到格式化著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。数字。
原创内容，盗版必究。【本文受版权保护】【原创内容，转载请注明出处】光标位置【本文受版权保护】
【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【未经授权禁止转载】当用户在数字串中间进行输入时，如果不做处转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。理，react受控组件会直接将光标放在末【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net尾，这是我们不希望看到的。我们希望在编辑【版权所有，侵权必究】原创内容，盗版必究。过程中，光标位置能准确放在我们需要输入的原创内容，盗版必究。【本文首发于唐霜的博客】地方。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【原创不易，请尊重版权】【转载请注明来源】
看上去很简单，实际上却很复杂，首先，我们【转载请注明来源】【本文受版权保护】需要获取input DOM元素，对DOM转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net进行光标操作。光标位置不是永远只前进一格【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net，当格式化过程中多出一个,时，光标前进两格，当删除过程中少了一个转载请注明出处：www.tangshuang.net,时，光标倒退两格。而由于react的垃圾【本文受版权保护】【关注微信公众号：wwwtangshuangnet】处理，我们必须自己计算修改后光标的位置（本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。即使不存在多出或少掉一个,的情况下，光标的位置都需要我们自己计算，未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net因为react总会让受控组件的光标放到末【未经授权禁止转载】转载请注明出处：www.tangshuang.net尾）。
const { selectionStart: cursor } = e.target
const resetCurr = () => {
// 输入英文字符等，react会主动把光标移动到最后，因此，这里要做一个主动回调
requestAnimationFrame(() => {
el.current.setSelectionRange(cursor - 1, cursor - 1) // -1 是因为我们不需要这个被输入的英文
})
}
由于react在处理受控组件时，是异步处本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】理（react的scheduler），所未经授权，禁止复制转载。【原创不易，请尊重版权】以，我在这里使用了requestAnim【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ationFrame来延后设定光标位置（本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】但是，这是不保险的，我们不能绝对保证re【原创不易，请尊重版权】【本文受版权保护】act内部的处理在一帧内完成）。这样，当【未经授权禁止转载】【版权所有，侵权必究】react把光标移动到末尾之后，我又把光【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。标移动了回来。
【未经授权禁止转载】未经授权，禁止复制转载。【本文受版权保护】【作者：唐霜】本文作者：唐霜，转载请注明出处。基于同样的原理，我们需要计算每次值被修改【版权所有】唐霜 www.tangshuang.net【作者：唐霜】前和修改后的一些信息，从而得到输入完成时【本文受版权保护】【原创不易，请尊重版权】，光标应该放在哪个位置。
【本文受版权保护】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。const focused = useRef()
const handleChange = (e) => {
focused.current = [e.target.value, e.target.selectionStart]
}
// 定位光标位置
useLayoutEffect(() => {
if (!focused.current) {
return
}
const [prevText, cursor] = focused.current
const prevCommaCount = prevText.split(',').length - 1
const currentCommaCount = text.split(',').length - 1
const offset = currentCommaCount - prevCommaCount
const curr = cursor + offset
const pos = curr < 0 ? 0 : curr
el.current.setSelectionRange(pos, pos)
}, [text])
第二段代码就考虑到了当改变值后，是否会多未经授权，禁止复制转载。未经授权，禁止复制转载。出或少掉一个,。基于useEffect的特性，我可以很【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】好的处理这个逻辑，useEffect具有【本文受版权保护】【本文受版权保护】watch的效果，这一点确实让hooks【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】让人着迷。
总之，经过一些记录、监听、比较，我可以准【原创内容，转载请注明出处】【作者：唐霜】确的定位光标了。但是，由于我使用了ref【本文受版权保护】【作者：唐霜】，那么，我的这个组件，就无法实现跨端（R著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。N）使用了。这也是一个不可避免的问题，不【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net过暂且不考虑这么深远吧。
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【原创内容，转载请注明出处】小数点【原创不易，请尊重版权】
原创内容，盗版必究。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。小数点看上去简单的不行，实际上是一个巨大本文作者：唐霜，转载请注明出处。【作者：唐霜】的难点。由于当我们输入小数点时，实际的表【未经授权禁止转载】【原创不易，请尊重版权】达值，是相同的，这会使得我们经过格式化后著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net，丢掉小数点。例如 1,234. 和 【原创内容，转载请注明出处】1,234 的实际值都是 【作者：唐霜】1234，这就会导致我们的格式化函数num2st本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。r格式化之后只能得到 1,234 而无法得到 未经授权，禁止复制转载。1,234. 这就是一件极其麻烦的事。这该怎么办呢？
这时，需要写一段特殊逻辑来覆盖这种情况。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】由于我们实际渲染的结果，是状态值text【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。，那么，即使在受控组件情况下，我们也可以【转载请注明来源】转载请注明出处：www.tangshuang.net不通过修改value而直接更新界面。所以【本文首发于唐霜的博客】【作者：唐霜】，当我们发现末尾是小数点的时候，直接不要【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】调onChange就好了，直接setTe原创内容，盗版必究。【作者：唐霜】xt来修改界面。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。if (text === next + '.') { // 删除了一个小数点
setText(next)
}
else if (next[next.length - 1] === '.' && cursor === next.length) { // 在末尾处理时，处理后末尾为小数点
setText(next)
}
也就意味着，实际上，即使是受控组件，In未经授权，禁止复制转载。原创内容，盗版必究。putNumber组件也有自己的内部临时转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net态，而这个临时态外部无法直接读取（可通过未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。inputRef读取）。这就是设计巧妙的【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。地方，我们一般认为一个输入框受控时，va【版权所有】唐霜 www.tangshuang.net【本文受版权保护】lue是什么，内部展示的才是什么，而万万本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。没想到，某些情况下，内部展示的可以不一样本文作者：唐霜，转载请注明出处。【未经授权禁止转载】，但是对应相同的一个value。
本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】【本文受版权保护】本文版权归作者所有，未经授权不得转载。
而且，我对小数点后面的值进行了处理。一般本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net来说，我们在整数部分千分位分隔符是从个位【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】到十位方向，而小数部分则相反，从0.1往转载请注明出处：www.tangshuang.net【转载请注明来源】0.01方向分隔。输入小数点本身，和格式【作者：唐霜】【未经授权禁止转载】化逻辑有冲突，因此，必须做特殊处理。还有著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。一个点，即用户可能在一串已经有小数点的数本文作者：唐霜，转载请注明出处。【本文受版权保护】字中间，再次输入小数点，这种情况下，我的著作权归作者所有，禁止商业用途转载。【作者：唐霜】处理方式是，把小数点迁移到用户当前输入的著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net位置，这种设计我认为是用户体验友好的。最【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。后，当用户在输入框中，只输入了一个.之后，他实际上将获得 【原创内容，转载请注明出处】0. 而非 未经授权，禁止复制转载。. 本身，因此也做了替换（包含用户输入 【关注微信公众号：wwwtangshuangnet】-.）。【未经授权禁止转载】
0 & 00【原创不易，请尊重版权】
【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】当输入的数字实际代表的值为0时，或者当输【本文首发于唐霜的博客】未经授权，禁止复制转载。入的小数末尾为0时，都和格式化逻辑有冲突【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】。格式化过程中，会将小数末尾的00去掉，原创内容，盗版必究。原创内容，盗版必究。这就导致我们无法输入.01小数。同时，由【版权所有】唐霜 www.tangshuang.net【本文受版权保护】于-0实际为0，所以导致我们无法输入-0【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。.1这样的值。如何解决这类问题呢？答案还未经授权，禁止复制转载。【作者：唐霜】是：特殊处理。
【作者：唐霜】原创内容，盗版必究。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
另外，当用户输入的时候，数字开头是00时本文作者：唐霜，转载请注明出处。【本文受版权保护】，也应该根据整数还是小数进行清除。
【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】
精度原创内容，盗版必究。
【作者：唐霜】【转载请注明来源】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。JS的数精度有限，无论是整数还是小数，都著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】有17位限制，这导致我们无法输入一个比1未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。7个位置更多的数（变成e数）。因此，我支本文版权归作者所有，未经授权不得转载。【转载请注明来源】持precise属性来让开发者决定，当前本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net这个输入框是否可以用字符串表达数字。一旦【原创内容，转载请注明出处】【版权所有，侵权必究】开启字符串表达数字之后，外部接收到的就会著作权归作者所有，禁止商业用途转载。【本文受版权保护】是字符串，而非真实的数字。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】
结语【版权所有，侵权必究】
【本文受版权保护】【本文受版权保护】【本文首发于唐霜的博客】看上去要实现一个数字输入框非常简单，实际【未经授权禁止转载】【原创不易，请尊重版权】上却有很多坑点等着我们去踩。很多细节都是【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。在不断的尝试和发现中补全，很难在一开始就【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。全部想到。我已经将代码在github开源本文版权归作者所有，未经授权不得转载。【作者：唐霜】，你可以通过这里阅读源码【版权所有】唐霜 www.tangshuang.net。如果你发现还有什么细节没有被考虑在内，【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net可以及时与我反馈。
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】2021-04-04 9352 React
antd 3.x的版本倒是还支持在逗号后面删除的.
各种问题，比如在逗号后面删除，只是删除了一个逗号，小数点后面还可以打小数点等等