1

我正在尝试使用正则表达式为 BRL 货币制作一个带掩码的 TextInput，因此每次用户键入一个数字时，它的格式如下：

屏幕截图

首先按下的数字出现在 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道具更新吗？无论如何，我实现了我想要的吗？因为我知道在 Android (Java) 中，我有一个功能可以在显示之前更改文本。

PS.：我正在使用OnChange函数，因为我发现它比onChangeText

4

0 回答 0