React-native 货币输入

Posted 2023-02-22

【中文标题】React-native 货币输入

【英文标题】：React-native currency input

【发布时间】：2017-11-10 05:47:38

【问题描述】：

我正在尝试创建一个货币输入，开始类似于

" $00.00"

然后当您开始输入时，它会先输入美分，然后再输入美元（即首先更新右侧的数字），例如

" $00.50"

到目前为止，我已经实现了它，用户在一个框中键入，正确格式的输出显示在第二个框中。

代码：

constructor(props) 
    super(props);


    this.state = 
        amount: '',
    ;



formatValue(value) 
    return accounting.formatMoney(parseFloat(value) / 100, "$ ");


render() 
    return (
        <ScrollView>

            <Text style=styles.text> Enter the Amount to be payed</Text>
                <TextInput
                    onChangeText=(amount) => this.setState(amount)>
                </TextInput>

                <TextInput
                    onChangeText = amount => this.setState(amount)                  
                    value=this.formatValue(this.state.amount)>                        
                </TextInput>

        </ScrollView>

    );

但是，我希望将货币格式应用于用户正在输入的同一个框。我尝试过这样的事情：

<TextInput 
        onChangeText=(amount) => this.setState(amount)
        value = this.formatValue(this.state.amount)>
</TextInput>

但这只是将输入设置为零，并且无法更改。我显然没有正确理解这一点。

有人对此有任何见解吗？

【问题讨论】：

你找到解决这个问题的好办法了吗？

【参考方案1】：

我需要在最近的一个项目中做这件事，我最终将它作为一个 npm 包发布。

https://github.com/wwdrew/react-native-numeric-textinput

它使用 Intl NumberFormat 来格式化货币和数字，所以应该适用于你想扔给它的任何货币。

【参考方案2】：

也许这个包可以帮助你。它可以让您在状态中存储更改值。

https://www.npmjs.com/package/react-currency-input

或者由于您只想屏蔽输入而不是对输入进行任何突变/转换，您当然可以这样做；

https://www.npmjs.com/package/react-input-mask

【讨论】：

我认为您提供的软件包仅适用于 react web 而不是本机。这里还有其他选项：npmjs.com/package/react-native-masked-input 这个是 react-native