regex InputNumber định dạng ant-thiết kế

Aug 16 2020

Các bạn, tôi thực sự không hiểu về regex, tôi đang sử dụng thành phần Số đầu vào ant-design để tạo bộ lọc tiền tệ.

hiện tại là như thế này:

 <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 : [])}
  />

Định dạng hiện tại, ví dụ nghìn năm trăm là như thế này: 1.500, tôi cũng cần nó để chấp nhận, các số phủ định (-1.500) và dấu phẩy cho các xu như 1.500,25

Các bạn có thể giúp mình được không? Tôi đã thử một số giải pháp nhưng không thể làm cho nó hoạt động như tôi cần

Trả lời

1 GiuliaLage Aug 16 2020 at 13:28

Các bạn sau khi tìm kiếm rất nhiều thì mình đã tìm ra một giải pháp, không thể nào tốt hơn được, nhưng hiện tại đang làm tốt nhiệm vụ của nó ..

Tôi đã cài đặt các phụ thuộc MaskedInput và text-mask-addons.

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>
  );