当值大于 100 万时，`toLocaleString()` 不会在数字输入中呈现答案

【问题标题】：`toLocaleString()` not rendering inside number input when value greater than 1 million当值大于 100 万时，`toLocaleString()` 不会在数字输入中呈现
【发布时间】：2022-11-24 00:14:15
【问题描述】：

在此代码中，我有值 1000000（一百万），我使用 toLocaleString('en-gb') 对其进行格式化以获得 1,000,000。

然后我将该值打印为文本，它按预期工作，当我将该 const 用作文本输入的值时也是如此。但是当在数字输入中使用该值时，它只是不呈现。它在价值 < 100 万时有效。

检查 html，我发现值是正确的：

此外，当尝试在该数字输入中键入值时，它不会在 4 位数字后注册值。

任何想法发生了什么？我想知道是否可能在 999.000 之后该数字将有两千个分隔符

teh codez（也在这个游乐场https://stackblitz.com/edit/react-ts-8ufbe1?file=App.tsx）：

export default function App() {
  const value = (1000000).toLocaleString('en-gb');
  const [inputValue, setInputValue] = React.useState(value);

  return (
    <div>
      <h1>{value}</h1>
      <input
        type="number"
        value={inputValue}
        onChange={(e) => setInputValue(Number(e.target.value).toLocaleString('en-gb'))}
      />
      <input type="text" value={inputValue} />
    </div>
  );
}

我看到有像 react-number-format 这样的库，但似乎本机方式应该可以满足我的需要。

非常感谢你提前。

【问题讨论】：

如果输入的字符串值无法解析为 JavaScript 数字常量形式的有效数字，则数字输入的 value 属性将为空。也就是说，它必须具有与 JavaScript 数字相同的形式，不带逗号和“.”。字符作为小数点分隔符。
这不是 React 的事情，它是浏览器处理那种类型的 <input> 的方式。
@Pointy 我认为你的评论是对的。会让它再打开一点，但我认为你的答案可能是正确的。谢谢你 :) 我知道这不是反应的事情，只是在反应中做了那个例子在 Stackblitz 中有一个可重现的例子，然后偶然发现了那个反应库。

标签： javascript formatting numbers

【解决方案1】：

它在达到 1,000 之前起作用，因为 1,000 是您必须添加逗号的地方。在 999 时，您仍然满足类型编号输入的要求，您只插入了一个数字 999。由于 HTML 仅真正允许使用字符串，因此它们允许您使用 "999" 与 999 纯数字版本进行传递。

任何状况之下。我认为您不想使用 type='number'，它的效果很差，并且上下显示自动收报机。如果这是一个以移动为中心的决定，请考虑使用type='tel'。

您还可以尝试通过将 2 个输入彼此叠加来手动屏蔽该行为。或者您可以使用输入 type='tel' onFocus={() => Number(inputValue)} 和 onBlur={() => inputValue.toLocaleString('en-gb')} 等等。

这种类型的东西通常有点乱，需要一点时间才能完美。用户界面很容易变得不稳定，问题并没有得到完美解决：

我们希望强制用户只输入数字并让他们更容易这样做（尤其是移动设备）
我们希望数字显示为字符串。这两个优先事项相互矛盾。

【讨论】：