regex InputNumber định dạng ant-thiết kế
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
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>
);