Javascript React.js-受控输入toLocaleString（）

我想得到一个数字字符串并添加逗号，以便为长数字创建更可读的格式。通常我会使用

toLocaleString（）

，但对于受控输入，它并没有像预期的那样工作

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

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

输入3个数字后会重置字段-有什么想法吗

---

您可以使用

react intl

中的

FormattedNumber

。文档可在以下位置获得：

样本：

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

---

您可以使用

react intl

中的

FormattedNumber

。文档可在以下位置获得：

样本：

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

---

工作解决方案-在handleChange函数中，更改以下内容：

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

为此：

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

---

它不起作用的原因是，它根据输入值创建了一个

数字

，它不是一个普通的数字，而是一个格式化的字符串。因此，它包含非数字字符。以上只是删除了非数字字符（尽管现在您知道了问题所在，还有其他方法可以解决）。

有效解决方案-在handleChange函数中，更改以下内容：

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

为此：

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

---

它不起作用的原因是，它根据输入值创建了一个

数字

，它不是一个普通的数字，而是一个格式化的字符串。因此，它包含非数字字符。以上只是删除了非数字字符（虽然现在您知道了问题所在，还有其他方法可以解决）。

这可以正常工作，但如果可能，我更喜欢没有任何额外组件的解决方案。如果您这样做，它是否工作得更好

this.setState（{value:parseNumber.toLocaleString（）}）没有，但答案贴在上面。这可以正常工作，但如果可能的话，我更喜欢没有任何额外组件的解决方案。如果你这样做，它工作得更好吗
this.setState（{value:parseNumber.toLocaleString（）}）没有，但答案贴在上面。我认为这就像是一个反应的问题。我认为这就像是一个反应的问题。那太好了，按预期工作。回答得好，谢谢。太好了，工作正常。回答得好，谢谢。