Реагировать родной - добавить префикс валюты TextInput

Question

Как добавить префикс валюты к TextInput в React Native? Вот пример того, чего я пытаюсь достичь:

Чтобы получить более подробную информацию - значение 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]; 

} 

Надеюсь, что это поможет!