如何使用antd掩码输入库获取antd表单字段的原始值？

Question

我在我的蚂蚁设计应用程序上使用antd掩码输入库，将掩码放入我的antd表单上的字段中。这个antd掩码输入库是使用这个输入掩码核心库构建的。

下面是一个关于codesandbox的工作示例。木卫一。在这两个字段中填写任意值，然后打开console。单击Confirm后，这些字段的值将记录在控制台输出中。

如您所见，phoneconst具有带掩码的字段的值，但我需要不带掩码的字段。inputmask内核上有一个getRawValue（）方法，但我不知道如何将它与antd mask输入库提供的MaskedInput组件一起使用。

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

查看源代码：

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

InputMask引用位于掩码值之下，因此您可以获得这样的函数：

this.inputMaskRef.current.mask.getRawValue()

例子：

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>
    );
  }
}