反應原生 - 將貨幣前綴添加到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]; 

} 

我希望有幫助！