[英]Text Input Amount Formatting
I'm new to react-native and I have used a text input for entering numbers but I'm not able to format the value ie, when I enter 5555 or 5555.5 I want it to be 5,555.00 or 5,555.50. 我是新的反应本机,我使用文本输入来输入数字,但我无法格式化值,即,当我输入5555或5555.5时,我希望它是5,555.00或5,555.50。 Can anyone help me with this? 谁能帮我这个? Thanks. 谢谢。
export default class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = {
amount: 0.0
};
}
numberformat(amount) {
this.setState({
num: Number(amount).toFixed(2)
});
}
render() {
console.log('numberFormat', this.state.amount);
return (
<TextInput
placeholder={this.state.amount.fixed(2)}
onChangeText={(amount) => this.numberformat(amount)}
/>
);
}
}
Use Intl.NumberFormat 使用Intl .Number格式
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = { amount: 0.0 };
}
handleChange = ({ target }) => {
let amount = new Intl.NumberFormat().format(target.value);
this.setState({
amount
});
};
render() {
return (
<input
type="text"
onChange={this.handleChange}
value={this.state.amount}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Source - Mozilla Number Format 来源 - Mozilla数字格式
try to use toFixed(2)
尝试使用toFixed(2)
example if your value is 例如,如果你的价值是
num=5555.5
OR 要么
num = 5;
n = num.toFixed(2);
console.log(n)
and for comma 并为逗号
You can use this function 您可以使用此功能
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
reference 参考
http://www.mredkj.com/javascript/numberFormat.html#addcommas http://www.mredkj.com/javascript/numberFormat.html#addcommas
The best approach would be the Intl.NumberFormat
object which is a constructor for objects that enable language sensitive number formatting. 最好的方法是Intl.NumberFormat
对象,它是对象的构造函数,支持语言敏感的数字格式。
export default class UselessTextInput extends Component {
state = {
amount: new Intl.NumberFormat({style: 'currency', currency: 'EUR'}).format(number))
};
render() {
return (
<TextInput
placeholder = {this.state.amount.fixed(2)}
onChangeText={(amount) => this.setState({amount})}
value={this.state.amount}
/>
);
}
}
More resources: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat 更多资源: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
This library react-number-format can be helpful 这个库的反应数字格式可能会有所帮助
Sample usage 样品用法
<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />
Output : $2,456,981 产出:2,456,981美元
export default class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = {
amount: 0.0,
num: ''
};
}
numberformat(num) {
this.setState({
num: Number(num).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
});
}
render() {
console.log('numberFormat', this.state.amount);
return (
<TextInput
placeholder={this.state.amount}
value={this.state.num}
onChangeText={(amount) => this.numberformat(amount)}
/>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.