regex InputNumber फॉर्मेटर एंटी-डिज़ाइन

Aug 16 2020

दोस्तों मैं वास्तव में रेगेक्स के बारे में नहीं समझता, मैं एक मुद्रा फ़िल्टर बनाने के लिए एंटी-डिज़ाइन इनपुट नंबर घटक का उपयोग कर रहा हूं।

वर्तमान में यह इस प्रकार है:

 <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

क्या आप लोग मेरी सहायता कर सकते हैं ? मैंने कुछ समाधानों की कोशिश की है, लेकिन मुझे आवश्यकतानुसार काम नहीं कर सकता

जवाब

1 GiuliaLage Aug 16 2020 at 13:28

बहुत खोज करने के बाद दोस्तों, मैंने एक उपाय खोजा, वह बेहतर नहीं हो सकता, लेकिन फिलहाल वह अपना काम कर रहा है।

मैंने 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>
  );