Question

我正在尝试在React Native中创建一种将输入格式格式化为美元格式的方法。

onChangeNumberFormat = (text, input) => {
    const obj = { ...this.state.data };

    const value = text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')
    obj[input] = value;

    this.setState({
      data: obj
    });
  };

我的输入（我正在使用Native Base）：

<Input
  value={Amount}
  onChangeText={(text) => this.onChangeNumberFormat(text, 'RentalAmount')}
  style={styles.valueText}
/>

当我输入5000.00时，它的格式为5,000.00，这是正确的。但是，如果删除最后的3 0个零，它将变为5,00而不是500。我该如何解决？另外，是否有办法始终将“ $”放在前面并只接受输入中的数字？

谢谢

Answer 1

要格式化货币，可以使用以下库之一：

否则，您可以执行以下操作：

const format = amount => {
    return Number(amount)
      .toFixed(2)
      .replace(/\d(?=(\d{3})+\.)/g, '$&,');
};

查看演示https://snack.expo.io/@abranhe/currency-formatting

import React, { useState } from 'react';
import { Text, View, TextInput, StyleSheet } from 'react-native';

export default () => {
  const [money, setMoney] = useState(0);

  const format = amount => {
    return Number(amount)
      .toFixed(2)
      .replace(/\d(?=(\d{3})+\.)/g, '$&,');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>$ {format(money)}</Text>
      <TextInput
        value={money}
        onChangeText={money => setMoney(money)}
        style={styles.input}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
  input: {
    height: 30,
    borderColor: 'black',
    borderWidth: 1,
  },
});

React Native中的美元格式正则表达式

1 个答案: