Javascript React native-将货币前缀添加到TextInput

如何在React Native中将货币前缀添加到TextInput？以下是我试图实现的一个示例：

为了提供更多细节，TextInput应该有一个默认值，例如10英镑。我希望货币符号永远在那里。 在某个时刻，该值将被发送到数据库，因此应将其转换为整数

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

import React，{Component}来自“React”
进口{
文本，
看法
ListView，
滚动视图，
样式表，
形象,，
触控高光，
文本输入，
}从“反应本机”
类AppView扩展组件{
状态={
isPlayerOneButtonActive:false，
isPlayerTwoButtonActive:false，
isThirdTileActive:错误，
textInputValue:'10英镑'，
}
activateButton=按钮激活=>{
const newState=Object.assign(
{},
{
isPlayerOneButtonActive:false，
isPlayerTwoButtonActive:false，
},
{[buttonToActivate]：true}，
)
this.setState（newState）；
}
showthirdfile=tileToShow=>{
this.setState（{isThirdTileActive:tileToShow}）；
}
_renderSecondTile=（）=>{
if（this.state.isplayerronebuttonactive | | this.state.isPlayerTwoButtonActive）{
返回(
输入金额
{this.showthirdfile（true）}
style={style.amountInput}
maxLength={3}
value={this.state.textInputValue}
/>
)
}
否则{
返回null；
}
}
_RenderHirdTile=（）=>{
if（this.state.isSecondTitleActive）{
返回(
第三块瓷砖
)
}
否则{
返回null；
}
}
render（）{
const{isPlayerOneButtonActive}=this.state
返回(
挑选球员
{this.activateButton（'isPlayerOneButtonActive'）}>
一号玩家
{this.activateButton（'isPlayerTwoButtonActive'）}>
一号玩家
{this.\u renderSecondTile（）}
{this.\u renderthird（）}
)
}
}

尝试使用以下方法：

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;
         }
     }
 }

---

我希望这有帮助

谢谢你的回答-我更新了我的问题，更详细地说明了我到底在努力实现什么。谢谢你更新了答案。在第一次加载时，我从状态中获得inputValue，但一旦更改，我就没有定义。似乎e.target.value在这里不起作用。用户不能将光标放在货币符号之前吗？

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;
         }
     }
 }

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];

}