自写MaskedInput导致无限循环

我写了一个带有千位分隔符的数字输入,所有操作都很流畅,我按一个数字而不是按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}
    />
  );
};
lyypf12 回答:自写MaskedInput导致无限循环

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3032083.html

大家都在问