정규식 InputNumber 포맷터 개미 디자인

Question

정규식에 대해 정말로 이해하지 못하는 녀석들, 나는 통화 필터를 만들기 위해 개미 디자인 입력 번호 구성 요소를 사용하고 있습니다.

현재 이것은 다음과 같습니다.

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

예를 들어 천오백의 현재 형식은 다음과 같습니다. 1.500도 받아 들일 필요가 있습니다. 음수 (-1.500)와 센트는 1.500,25와 같은 쉼표입니다.

저 좀 도와 주 시겠어요? 몇 가지 솔루션을 시도했지만 필요에 따라 작동하지 않습니다.

Answer 1

많은 검색 끝에 한 가지 해결책을 찾았습니다. 더 좋은 방법은 아니지만 지금은 그 일을하고 있습니다 ..

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