我写了一个带有千位分隔符的数字输入,所有操作都很流畅,我按一个数字而不是按Backspace再按一个数字(快速执行),这会导致无限循环,其中我的输入值会不断变化。 请看看,让我知道我的逻辑失败在哪里。
import React from 'react';
import { TextInput } from 'react-native';
const addSeparator = (input,divider) => {
return Number(input.toString())
.toFixed(0)
.replace(/(\d)(?=(\d{3})+(?!\d))/g,`$1${divider || '.'}`);
};
const removeNonDigits = (value) => {
const formatedValue = !value && value !== 0 ? '' : value.toString();
return formatedValue.replace(/\D/g,'');
};
const MaskedNumberInput = (
{ onChangeText,value,maxValue,...props },ref,) => {
const [maskedValue,setMaskedValue] = React.useState(
value === '' ? value : addSeparator(value),);
React.useEffect(() => {
onmaskedInputChangeText(value);
},[value]);
React.useEffect(() => {
if (onChangeText) {
onChangeText(removeNonDigits(maskedValue));
}
},[maskedValue]);
const onmaskedInputChangeText = (newValue) => {
let digitvalue = removeNonDigits(newValue);
if (
maxValue !== '' &&
maxValue !== null &&
maxValue !== undefined &&
digitvalue > maxValue
) {
digitvalue = maxValue;
}
if (removeNonDigits(maskedValue) === digitvalue) {
console.tron.log('return');
return;
}
const maskedDigitvalue =
digitvalue === '' ? digitvalue : addSeparator(digitvalue);
setMaskedValue(maskedDigitvalue);
};
return (
<TextInput
ref={ref}
value={maskedValue}
onChangeText={onmaskedInputChangeText}
keyboardType="number-pad"
{...props}
/>
);
};