文本输入量格式

问题描述 投票:0回答:5

我是反应原生的新手,我使用文本输入来输入数字,但我无法格式化值,即当我输入5555或5555.5时,我希望它为5,555.00或5,555.50。谁能帮我这个?谢谢。

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)}
      />
    );
  }
}
javascript react-native
5个回答
0
投票

尝试使用toFixed(2)

例如,如果你的价值是

num=5555.5

要么

num = 5;
n = num.toFixed(2);
console.log(n)

并为逗号

您可以使用此功能

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;
}

参考

http://www.mredkj.com/javascript/numberFormat.html#addcommas


0
投票

最好的方法是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}
      />
    );
  }
}

更多资源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat


0
投票

使用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);

来源 - Mozilla Number Format


0
投票

这个图书馆react-number-format可能会有所帮助

  1. 前缀,后缀和千位分隔符。
  2. 自定义格式模式。
  3. 掩蔽。
  4. 自定义格式处理器
  5. 输入或格式中的格式编号为简单文本

样品用法

<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />

产出:2,456,981美元

Demo


0
投票
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)}
      />
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.