反应原生 - 将货币前缀添加到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。最后，文本输入的值将是与"£"连接。在我的最后一个答案中，我在每千分之一的整数字符串版本中添加了,。由于您在文本输入字段中的最大长度为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]; 

} 

我希望有帮助！