React native - 向 TextInput 添加货币前缀

Question

如何在 React Native 中为 TextInput 添加货币前缀？这是我要实现的目标的示例：

提供更多细节 - TextInput 应该有一个默认值，例如 £10。我希望货币符号始终存在。 在某些时候，该值将被发送到数据库，因此应将其转换为整数。

到目前为止我的代码（_renderSecondTile 部分）：

import React, {Component} from 'react'
import {
    Text,
    View,
    ListView,
    ScrollView,
    StyleSheet,
    Image,
    TouchableHighlight,
    TextInput,
} from 'react-native'


class AppView extends Component {
    state = {
        isPlayerOneButtonActive: false,
        isPlayerTwoButtonActive: false,
        isThirdTileActive: false,
        textInputValue: '£10',
    }

     activateButton = buttonToActivate => {
        const newState = Object.assign(
            {},
            {
                isPlayerOneButtonActive: false,
                isPlayerTwoButtonActive: false,
            },
            {[buttonToActivate]: true},
        )
        this.setState(newState);
    }

    showThirdTile = tileToShow => {
        this.setState({isThirdTileActive: tileToShow});
    }

    _renderSecondTile = () => {
         if(this.state.isPlayerOneButtonActive || this.state.isPlayerTwoButtonActive) {
             return(
                 <TouchableHighlight>
                     <View style={[styles.step, styles.stepTwo]}>
                        <View style={{flex: 1}}>
                             <Text style={styles.heading}>Enter amount</Text>
                             <View style={styles.amountInputContainer}>
                                 <TextInput
                                     onKeyPress={() => {this.showThirdTile(true)}}
                                     style={styles.amountInput}
                                     maxLength = {3}
                                     value={this.state.textInputValue}
                                 />
                             </View>
                         </View>
                     </View>
                 </TouchableHighlight>
             )
         }
         else{
             return null;
         }
    }

    _renderThirdTile = () => {
        if(this.state.isSecondTitleActive){
            return(
                <View style={[styles.step, styles.stepThree]}>
                    <View style={{flex:1}}>
                        <Text style={styles.heading}>Third tile</Text>
                    </View>
                </View>
            )
        }
        else{
            return null;
        }
    }

    render(){
        const {isPlayerOneButtonActive} = this.state

        return (
            <ScrollView style={styles.container}>
                <View style={[styles.step, styles.stepOne]}>
                    <View style={{flex:1}}>
                        <Text style={styles.heading}>Pick player</Text>
                        <View style={styles.pickContainer}>
                            <TouchableHighlight onPress={() => {this.activateButton('isPlayerOneButtonActive')}}>
                                <Text>Player One</Text>
                            </TouchableHighlight>

                            <TouchableHighlight onPress={() => {this.activateButton('isPlayerTwoButtonActive')}}>
                                <Text>Player One</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                </View>

                {this._renderSecondTile()}

                {this._renderThirdTile()}
            </ScrollView>
        )
    }
}

Answer 1

试试这个：

class AppView extends Component {
   state = {
        isPlayerOneButtonActive: false,
        isPlayerTwoButtonActive: false,
        isThirdTileActive: false,
        inputValue: 10,
    }

    inputChange = (e) => {
        this.setState({inputValue: parseInt(e.target.value)});
        if(!this.state.isThirdTileActive){
            this.showThirdTile(true);
        }
    }
    _renderSecondTile = () => {
         if(this.state.isPlayerOneButtonActive || this.state.isPlayerTwoButtonActive) {
             return(
                 <TouchableHighlight>
                     <View style={[styles.step, styles.stepTwo]}>
                        <View style={{flex: 1}}>
                             <Text style={styles.heading}>Enter amount</Text>
                             <View style={styles.amountInputContainer}>
                                 <TextInput
                                     style={styles.amountInput}
                                     maxLength = {3}
                                     onChange={this.inputChange}
                                     value={"£" + this.state.inputValue}
                             />
                             </View>
                         </View>
                     </View>
                 </TouchableHighlight>
             )
         }
         else{
             return null;
         }
     }
 }

注意：我遗漏了我没有更改的任何内容，以便我的答案更易于阅读。

在这里，我将textInputValue 更改为inputValue。现在该值存储为整数，因此可以将其发送到数据库。每当在文本输入字段中更改该值时，状态将由inputChange 更新。如果第三个磁贴尚未激活，inputChange 也会调用showThirdTile。最后，文本输入的值将是inputValue 与"£" 连接。在我的最后一个答案中，我在整数的字符串版本中每千位添加了,。由于您在文本输入字段中的最大长度为 3，因此不再需要。如果您需要增加最大长度，我会使用它来转换：

var cashify = function(amountIn){

    var amount = parseFloat(amountIn).toFixed(2);
    var splitAmount = amount.split(".")[0];
    var i = splitAmount.length-4;

    while(i>=0){
        splitAmount = splitAmount.slice(0,i+1) + "," + splitAmount.slice(i+1);
        i=i-3;
    }
    return "\u00A3" + splitAmount + "." + amount.split(".")[1];

}

希望对你有帮助！