反应中的千位分隔符输入类型数（JSX）答案

【问题标题】：thousands separator input type number in react (JSX)反应中的千位分隔符输入类型数（JSX）
【发布时间】：2020-12-07 06:27:47
【问题描述】：

我想保留<input type="number" />。我见过的所有解决方案都希望输入类型是文本。

我有一个表单，用户输入一个数字（美元金额）并希望输入例如 120,000 而不是 12000，因为他们正在输入。

<input
  type="number"
  min="80000"
  max="2000000"
  step="1"
  value={borrowAmount}
  placeholder="value"
  onChange={e => setBorrowAmount(e.target.value)}
/>;

【问题讨论】：

这里的信息太少，无法帮助您。包括数据和预期结果。
我只是添加了一些数据，但我所要求的和预期的结果是不言自明的。当输入类型为数字时，我想要千位分隔符
这能回答你的问题吗？ HTML Input type number Thousand separator
我以前见过。它使用 jquery，所以不，它不能回答我的问题。

标签： reactjs jsx

【解决方案1】：

你试过react-number-format吗？它可以很好地添加数千个分隔符。

<NumberFormat 
  thousandSeparator={true} 
  prefix={'$'} 
  value={123456789}
  isAllowed={(values) => {
    const {floatValue} = values;
    return floatValue >= 5 &&  floatValue <= 10000;
  }}
/>

onValueChange 处理程序返回一个像这样的对象：

{
  "formattedValue": "$123,456,789",
  "value": "123456789",
  "floatValue": 123456789
}

【讨论】：

我试过了。它可以工作，但是我想使用的原因是我可以使用像 min 和 max 这样的参数来验证表单。
@HesamAlavi 您可以使用 isAllowed 道具代替 min 和 max