Getting Input Value without Space-CodePudding

I'm trying to get customer credit card number with MaskedInput and I need to delete spaces before using it on calling service but even though I don't actually change event value whenever customer tries to delete it, they can't because in value spaces doesn't exist. I only want to get value without space and set it into state. How can I do that?

 <MaskedInput inputMode="numeric" type="text" onChange={(e) => this.checkCC(e)} mask={[/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/]} required></MaskedInput>

checkCC(e) {
        this.setState({
            creditCard: event.target.value.replaceAll(" ", "")
        });
    }

CodePudding user response：

I believe your mask is incorrect. Try something like this

          mask={[
            {
              length: 4,
              regexp: /^[0-9]{4}$/,
              placeholder: "xxxx"
            },
            { fixed: " " },
            {
              length: 4,
              regexp: /^[0-9]{4}$/,
              placeholder: "xxxx"
            },
            { fixed: " " },
            {
              length: 4,
              regexp: /^[0-9]{4}$/,
              placeholder: "xxxx"
            },
            { fixed: " "},
            {
              length: 4,
              regexp: /^[0-9]{4}$/,
              placeholder: "xxxx"
            }
          ]}

CodePudding user response：

use trim() function

        this.setState({
        creditCard: event.target.value.trim()
    });