antd 货币 inputNumber 只接受数字答案

【问题标题】：antd currency inputNumber accept only numberantd 货币 inputNumber 只接受数字
【发布时间】：2021-09-17 17:09:08
【问题描述】：

我想有一个 InputNumber 有一千个分隔符，同时只接受数值，如果我使用 type="number" 我不能显示 "," 分隔符，如果我不把它不能阻止非数字输入。例如，这个接受非数字，如果我添加另一个替换以在最后删除非数字，它也不起作用，正如我所说的添加 type="number" 防止显示 "," 分隔符

<Form.Item name="amount" label="">
                                <InputNumber
                                    formatter={(value) => {
                                        return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                    }}
                                />
                            </Form.Item>

这个也不起作用issues/10975

感谢任何帮助

【问题讨论】：

标签： reactjs antd

【解决方案1】：

此特定修复将仅删除不包括逗号的非数值。然而InputNumber 似乎在您不集中注意力时运行onChange。因此，如果您想故意不接受字母表，则此代码不会削减它。您可能只需要使用自己的格式化程序创建自己的输入。

function onNumericInputChange(value) {
  const reg = /^-?\d*(\.\d*)?$/;
  if ((!isNaN(value) && reg.test(value)) || value === "" || value === "-") {
    return value;
  }
  return false;
}

const App = () => {
  const [value, setValue] = useState();
  return (
    <div style={{ margin: 24 }}>
      <p style={{ marginBottom: 24 }}>
        Current antd version: {version} <br />
        You can change antd version on the left panel (Dependencies section).
      </p>
      <InputNumber
        formatter={(value) => {
          console.log(value);
          return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }}
        onChange={(value) => {
          const parsed = onNumericInputChange(value);
          console.log(parsed);
          if (parsed) {
            setValue(parsed);
          }
        }}
        value={value}
      />
    </div>
  );
};

在这里提琴： https://codesandbox.io/s/ant-design-start-forked-r61vn?file=/index.js

【讨论】：