React.js-LocalLocalString（）的受控輸入

Question

我想獲取一串數字並添加逗號以為長號創建更具可讀性的格式。 通常我會使用toLocaleString()但是在受控輸入下它無法正常工作。

在我的代碼中，我正在做：

  handleChange(event) {
    const parseNumber = parseInt(event.target.value);
    const toLocale = parseNumber.toLocaleString();
    this.setState({ value: toLocale });
  }

輸入3個數字后，它將重置該字段-有什么想法嗎？

https://codesandbox.io/s/91q75k22mo

Answer 1

工作解決方案-在您的handleChange函數中，更改以下內容：

const toNumber = Number(event.target.value);

對此：

const toNumber = Number(event.target.value.replace(/\D/g, ''));

它不起作用的原因是因為它基於輸入值創建了一個Number ，它不是純數字，而是帶格式的字符串。 因此，它包含非數字字符。 上面的代碼只是刪除了非數字字符（盡管現在您知道了這個問題，還有其他方法可以解決）。

Answer 2

您可以使用react-intl FormattedNumber 。 該文檔位於此處： https : //github.com/yahoo/react-intl/wiki/Components#number-formatting-components

一個樣品：

<IntlProvider locale='en'>
  <FormattedNumber value={examples.negativeNumber} />
</IntlProvider>