Маскировка React Native TextInput не работает - PullRequest
Новая
       3

Маскировка React Native TextInput не работает

1 голос
/ 29 мая 2020

Я пытаюсь создать замаскированный TextInput для валюты BRL с использованием регулярного выражения, поэтому каждый раз, когда пользователь вводит число, оно формируется следующим образом:

Screen capture

Сначала нажатое число появляется внутри TextInput, а затем вы можете изменить state на желаемое значение. Нет ли способа изменить текст до , который отображается для пользователя?

В основном то, что я делаю: 

const MoneyTextInput = ({onChangeText, ok}) => {
  let [text, setText] = useState('00,00');
  return (
    <TextInput
      value={text}
      keyboardType="number-pad"
      style={{
        width: '100%',
        height: '100%',
        fontSize: 22,
      }}
      onChange={({nativeEvent}) => {
        setText(prettifyCurrency(nativeEvent.text));
        onChangeText(prettifyCurrency(nativeEvent.text));
      }}
    />
  );
};

И функция с регулярным выражением это: 

function prettifyCurrency(value: String): String {
  if (!value) {
    return '00,00';
  }
  let newText = value.replace(/(\D)/g, '').replace(/^0+/, '');

  if (newText.length < 4) {
    for (let i = newText.length; i < 4; i++) {
      newText = '0' + newText;
    }
  }
  newText = newText
    .replace(/(\d{2}$)/g, ',$&')
    .replace(/(\d{1})(\d{3})([,])/, '$1.$2$3')
    .replace(/(\d{1})(\d{3})([.])/, '$1.$2$3')
    .replace(/(\d{1})(\d{3})([.])/, '$1.$2$3');
  return newText;
}

Разве он не должен ждать обновления value prop? Есть ли способ достичь того, чего я хочу? Потому что я знаю, что в Android (Java) у меня была функция для изменения текста до его отображения.

PS: Я использую функцию OnChange, потому что я обнаружил, что это немного быстрее, чем onChangeText

...