Question

我正在Ant设计应用程序上使用antd-mask-input库，将蒙版放入antd form上的字段中。此antd-mask-input库是使用此inputmask-core库构建的。

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

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

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

1 个答案: