如何使用 antd-mask-input 库获取 antd 表单字段的原始值？

Question

I am using antd-mask-input library on my Ant Design app to put mask into a field on my antd form . This antd-mask-input library was built using this inputmask-core library.

Here is an working example on codesandbox.io. Fill in any value on both fields and open console. Once you click on Confirm the value of the fields will be logged on console output.

As you can see, the phone const have the value of the field with the mask, but I need it without the mask. There is a getRawValue() method on inputmask-core but I can't figure out how to use it with the MaskedInput component provided by antd-mask-input library.

import React, { Component } from "react";
import { Form, Icon, Input, Button } from "antd";
import { MaskedInput } from "antd-mask-input";

const INPUT_ICON_COLOR = "rgba(0,0,0,.25)";

const FormFields = Object.freeze({
  EMAIL: "email",
  PHONE: "phone"
});

class Signup extends Component {
  handleSubmit = e => {
    const { form } = this.props;
    const { validateFields } = form;

    e.preventDefault();

    validateFields((err, values) => {
      if (!err) {
        const a = form.getFieldValue(FormFields.PHONE);
        debugger;

        const phone = values[FormFields.PHONE];
        const email = values[FormFields.EMAIL];

        console.log("phone", phone);
        console.log("email", email);
      }
    });
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;

    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          width: "100%",
          flexDirection: "column"
        }}
      >
        <Form onSubmit={this.handleSubmit} className={"login-form"}>
          <Form.Item>
            {getFieldDecorator(FormFields.PHONE, {
              rules: [
                {
                  required: true,
                  message: "Please type value"
                }
              ]
            })(
              <MaskedInput
                mask="(11) 1 1111-1111"
                placeholderChar={" "}
                prefix={
                  <Icon type="phone" style={{ color: INPUT_ICON_COLOR }} />
                }
                placeholder="Phone"
              />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator(FormFields.EMAIL, {
              rules: [{ required: true, message: "Please type value" }]
            })(
              <Input
                type={"email"}
                prefix={
                  <Icon type="mail" style={{ color: INPUT_ICON_COLOR }} />
                }
                placeholder="Email"
              />
            )}
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className={"login-form-button"}
            >
              Confirm
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Form.create({ name: "signup" })(Signup);

Answer 1

Looking on the source code :

export default class MaskedInput extends Component<MaskedInputProps> {
  mask: InputMask;
  input!: HTMLInputElement;
....
}

The InputMask reference is under the mask value, therefore you can get the function like so:

this.inputMaskRef.current.mask.getRawValue()

Example:

class Signup extends Component {
  inputMaskRef = React.createRef();

  handleSubmit = e => {
    ...
    validateFields((err, values) => {
      if (!err) {
        ...
        console.log(this.inputMaskRef.current.mask.getRawValue());
      }
    });
  };

  render() {
    ...
    return (
      <Form ...>
        <Form.Item>
          {getFieldDecorator(FormFields.PHONE, {...})(
            <MaskedInput
              ref={this.inputMaskRef}
              mask="(11) 1 1111-1111"
              ...
            />,
          )}
        </Form.Item>
        ...
      </Form>
    );
  }
}