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

我正在使用我的Ant Design应用程序上的库将掩码放入我的应用程序上的字段中。此antd掩码输入库是使用此库构建的

下面是一个关于codesandbox.io的示例。在这两个字段中填写任意值，然后打开console。单击

Confirm

后，这些字段的值将记录在控制台输出中

如您所见，

phone

const具有带掩码的字段的值，但我需要不带掩码的字段。在inputmask内核上有一个方法，但我不知道如何将它与库提供的

MaskedInput

组件一起使用

import React，{Component}来自“React”；
从“antd”导入{表单、图标、输入、按钮}；
从“antd掩码输入”导入{MaskedInput}；
常量输入图标颜色=“rgba（0,0,0,25）”；
const FormFields=Object.freeze({
电子邮件：“电子邮件”，
电话：“电话”
});
类注册扩展了组件{
handleSubmit=e=>{
const{form}=this.props；
const{validateFields}=form；
e、 预防默认值（）；
validateFields（（错误，值）=>{
如果（！err）{
const a=form.getFieldValue（FormFields.PHONE）；
调试器；
const phone=值[FormFields.phone]；
const email=值[FormFields.email]；
控制台日志（“电话”，电话）；
控制台日志（“电子邮件”，电子邮件）；
}
});
};
render（）{
const{form}=this.props；
const{getFieldDecorator}=form；
返回(
{getFieldDecorator（FormFields.PHONE{
规则：[
{
要求：正确，
消息：“请键入值”
}
]
})(
)}
{getFieldDecorator（FormFields.EMAIL{
规则：[{必需：true，消息：“请键入值”}]
})(
)}
证实
);
}
}
导出默认表单。创建（{name:“signup”}）（signup）；

看：

例如：

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

类注册扩展组件{
inputMaskRef=React.createRef（）；
handleSubmit=e=>{
...
validateFields（（错误，值）=>{
如果（！err）{
...
log（this.inputMaskRef.current.mask.getRawValue（））；
}
});
};
render（）{
...
返回(
{getFieldDecorator（FormFields.PHONE，{…}）(
,
)}
...
);
}
}

---

试着制作一个小的可生产的示例：，更容易回答，并且有一个代码可以玩。好的，我会在完成后编辑这个问题。嗨@DennisVash，请看一看，代码沙盒已经完成了。它帮助很大。在codesandbox上使用您的解决方案后，我改进了您的代码。我最后的密码是开着的。

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

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