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

Question

我正在使用 antd-mask-input我的 Ant Design 应用程序上的库将掩码放入我的 antd form 的字段中.这个 antd-mask-input 库是使用这个 inputmask-core 构建的图书馆。

这是一个 working example在 codesandbox.io 上。在两个字段上填写任何值并打开控制台。单击 Confirm 后，字段的值将记录在控制台输出中。

如您所见，phone const 具有带掩码的字段值，但我需要不带掩码的字段。有一个getRawValue() inputmask-core 上的方法，但我不知道如何将它与 antd-mask-input 提供的 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

寻找 on the source code :

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

InputMask 引用在 mask 值下，因此您可以像这样获得函数:

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