React-原生货币输入

Question

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

" $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>

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

有人对此有任何见解吗？

Answer 1

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

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

它使用 Intl NumberFormat 来格式化货币和数字，因此应该适用于您想要使用的任何货币。

Answer 2

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

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

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

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

Answer 3

我不知道你的用例，但我已经测试了这个实现，它根本不直观。我建议你建立一个类似于 venmo 或 cashapp 的输入。