javascript - 组件输入错误

Question

我需要自定义 Ant Design 的输入数字字段。货币字段的格式为(货币) 例如: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 设计示例链接，我知道您还需要一个解析器。因此，我为您创建了一个工作代码示例。这是代码:

  <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

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