如何使用 React Native 在 TextInput 值内连接数字代码和字符串

Question

有两个变量like.

this.state={Amount=50, CurrencySymbol="&#x20B9;"}

TextInput 渲染

<TextInput value={this.state.CurrencySymbol + " " + this.state.Amount.toString()} editable={false}></TextInput>

但未显示货币符号。

有什么方法可以在 TextInput 中动态打印货币符号

Answer 1

您以错误的方式分配状态值。这应该是这样的：

this.state = {
  Amount: 50,
  CurrencySymbol: "\u0024"
}

\u20B9 用于卢比。
\u0024 用于美元。

并且您的州中没有名为 TAmount 的州。你写了this.state.TAmount.toString()。应该是 this.state.Amount.toString().

<TextInput value={this.state.CurrencySymbol + " " + this.state.Amount.toString()} editable={false}></TextInput>

更新

因为你有 HTML 货币符号，所以你可以通过这种方式将其保存到你的状态中：

this.state = {
  Amount: 50,
  CurrencySymbol: "&#x20B9;",
  CurrencySymbols: {
    "&#x20B9;": "\u20B9",
    "&#x20AC;": "\u20AC",
    "&#x0024;": "\u0024"
  }
}

// Then use it on like this
<TextInput value={this.state.CurrencySymbols[this.state.CurrencySymbol] + " " + this.state.Amount.toString()} editable={false}></TextInput>

我想这可能是解决问题的最简单方法。

你不能在 React Native 中使用 HTML 之类的符号，react-native-webview 除外。

就是这样。

Answer 2

以您现在的方式使用状态已被弃用，您应该使用 useState() 钩子来定义状态及其 setter 函数。

更新这个

import React,{ useState } from 'react';

//Set State Variables

const [amount,setAmount] = useState(50);
const [currencySymbol,setcurrencySymbol] = useState("&#x20B9;");

//Set value of text input to your state variable values

<TextInput value={currencySymbol + amount.toString()} editable={false} />

如何使用 React Native 在 TextInput 值内连接数字代码和字符串

How to concatenate numaric code and string inside TextInput value using React Native

react-native

react-native-textinput