组件输入中的错误

Question

我需要自定义 Ant Design 的 Input Number 字段。货币字段的格式为（货币） 例如：R $ 9.800,99。

我使用了 Intl，但 NaN 正在返回。如何解决此错误？

相关链接：

• Ant InputNumber API: formatter

• JS Intl.NumberFormat

点击：Here

沙盒代码：https://codesandbox.io/s/friendly-hamilton-8pwvi

const MyInput = () => {
  const handleChange = event => {
    console.log(event);
  };

  return (
    <div>
      <InputNumber
        name="topText"
        style={{
          width: 400,
          marginRight: "1rem"
        }}
        formatter={value => new Intl.NumberFormat("pt-BR", {
            style: "currency",
            currency: "BRL"
          }).format(value)
        }
        onChange={handleChange}
      />
    </div>
  );
};

const App = () => {
  return (
    <div className="contain-all">
      <MyInput />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

我查看了您的 ant 设计示例链接，我知道您也需要 parser。因此，我为您创建了一个工作代码示例。这是代码：

  <InputNumber
    name="topText"
    style={{
      width: 400,
      marginRight: "1rem"
    }}
    formatter={value => `R$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
    parser={value => value.replace(/[R]\$\s?|(,*)/g, "")}
    onChange={handleChange}
  />

这是代码的工作示例： https://codesandbox.io/s/weathered-morning-expib

由于它的数字类型字段，因此您可以使用箭头增加或减少值