正则表达式InputNumber格式化程序ant-design [英] regex InputNumber formatter ant-design

问题描述

我对正则表达式真的不了解，我正在使用ant-design Input Number组件制作货币过滤器.

Guys I really not understand about regex, I'm using ant-design Input Number component to make a currency filter.

目前这是这样的:

 <InputNumber
    style={{ width: 175 }}
    formatter={value => `R$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, 
    ".")}
    parser={value => value.replace(/[A-Z]|[a-z]|[$ ]|\.+/g, "")}
    onChange={(value) => setSelectedKeys(value ? value : [])}
  />

当前格式，例如:1500:1.500 我还需要它接受负数(-1.500)和逗号(例如1.500,25)的逗号

The current format, for exemple thousand five hundred is like this : 1.500 I need it to accept as well, negatives numbers (-1.500) and comma for the cents like 1.500,25

你们能帮我吗?我已经尝试了一些解决方案，但无法使其按需工作

Can you guys help me ? I've try some solutions but can't make it work as I need

推荐答案

经过大量搜索的人，我发现了一个解决方案，虽然不是更好的解决方案，但此刻正在努力.

Guys after searching a lot,I found one solution, can't be the better one, but at moment is doing its job..

我安装了MaskedInput和text-mask-addons依赖项.

I installed MaskedInput and text-mask-addons dependencies.

import MaskedInput from "react-text-mask";
import createNumberMask from "text-mask-addons/dist/createNumberMask";

const defaultMaskOptions = {
    prefix: "R$",
    suffix: "",
    includeThousandsSeparator: true,
    thousandsSeparatorSymbol: ".",
    allowDecimal: true,
    decimalSymbol: ",",
    decimalLimit: 2,
    integerLimit: 7,
    allowNegative: true,
    allowLeadingZeroes: false,
  };
  const currencyMask = createNumberMask(defaultMaskOptions);


const NumberFilter = (
    <Space style={{ marginRight: 20 }}>
      <MaskedInput
        mask={currencyMask}
        render={(ref, props) => (
          <Input
            placeholder="Valor inicial"
            ref={(input) => ref(input && input.input)}
            {...props}
            value={selectedKeys[0]}
            onChange={(event) => {
              props.onChange(event);
              let betweenInitial = [...selectedKeys];
              betweenInitial[0] = event.target.value;
              setSelectedKeys(betweenInitial);
            }}
          />
        )}
      />
      <RiArrowLeftRightLine />
      <MaskedInput
        mask={currencyMask}
        render={(ref, props) => (
          <Input
            placeholder="Valor final"
            ref={(input) => ref(input && input.input)}
            {...props}
            value={selectedKeys[1]}
            onChange={(event) => {
              props.onChange(event);
              let betweenFinal = [...selectedKeys];
              betweenFinal[1] = event.target.value;
              setSelectedKeys(betweenFinal);
            }}
          />
        )}
      />
    </Space>
  );

这篇关于正则表达式InputNumber格式化程序ant-design的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！