点击时光标向右跳转，因为删除了React中的千位分隔符

Question

例如，如果值(数字(为1,234，并且我在2和3之间单击，则当数字被重新格式化为1234时，光标会在3和4之间跳跃，但cursor会记住以前的位置。formattedNumber.removeGrouping删除了千位分隔符。我需要重新格式化，如何修复它？

const onClickHandler = (event: any) => {
const numberString = String(event.target.value);
if (numberString.length > 0) {
const number = formattedNumber.parse(numberString, language);
if (isNaN(number)) {
return;
}
value = formattedNumber.removeGrouping(numberString, language);
const cursor = event.target.selectionStart;
const element = event.target;
window.requestAnimationFrame(() => {
element.selectionStart = cursor;
element.selectionEnd = cursor;
});
setValue(value);
}
};

Answer 1

我自己想出了解决方案：

const onClickHandler = (event: any) => {
const numberString = String(event.target.value);
if (numberString.length > 0) {
const number = formattedNumber.parse(numberString, language);
if (isNaN(number)) {
return;
}
// Calculates where to position the cursor
let cursor = event.target.selectionStart;
const element = event.target;
const beforeCursorString = numberString.slice(0, cursor);
if (beforeCursorString.length > 0) {
const beforeCursorNoSeparators = formattedNumber.removeSeparators(beforeCursorString, language);
const diffLength = beforeCursorString.length - beforeCursorNoSeparators.length;
cursor = cursor - diffLength;
}
window.requestAnimationFrame(() => {
element.selectionStart = cursor;
element.selectionEnd = cursor;
});
setValue(formattedNumber.removeSeparators(numberString, language));
}
};