Javascript 在没有getFieldDecorator的情况下，将react输入掩码与antd一起使用

我是React新手，我想将

React输入掩码

与

antd

输入字段一起使用。如果我使用

getFieldDecorator

和

Form.create

，一切正常

在inputmask.js中：

const CustomInput = forwardRef((props, ref) => {
  return (
    <ReactInputMask {...props}>
      {inputProps => (
        <Input
          {...inputProps}
          ref={ref}
          disabled={props.disabled ? props.disabled : null}
        />
      )}
    </ReactInputMask>
  );
});

CustomInput.propTypes = {
  mask: PropTypes.string,
  maskChar: PropTypes.string,
  formatChars: PropTypes.object,
  alwaysShowMask: PropTypes.bool,
  inputRef: PropTypes.func
};

export default CustomInput;

代码基本相同，但在第二个示例中，掩码不起作用。您能告诉我，我的错误在哪里吗？

为您管理它的表单字段

值

s

如果您删除了它，您需要自己管理它

您可以通过仅呈现

CustomInput

来确保它，但它仍然无法像您所看到的那样工作

函数FormBuilder（道具）{
//行不通
返回(
);
}

要修复它，如上所述，自己管理输入状态，：

功能应用程序（道具）{
const[value，setValue]=使用状态（“”）；
返回(
setValue（e.target.value）}
掩码=“+7（999）999-99-99”
占位符=“+7（\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
/>
发送
);
}

注意事项：

如果您使用其他

表单

库，比如不要混合组件，比如在的

表单

中使用antd的

表单.Item

react final form

，使用单个库，否则您将获得 意外的结果

antd

Form

是的一个实现，因此您可以使用它的扩展api

当您使用完整的UI库如

antd

时，您需要一个很好的理由来使用其他组件，如果确实需要，请重新考虑 其他

表单

库

---

1） 是的，我知道。2） 多谢各位。3） 我可能需要一些建议。我想使用

react final form

，因为我有一个复杂的表单，其中包含步骤、一些自定义元素、条件输入字段和一些可重用的部分，如地址或个人数据，供不同的人使用。我知道你可以用

react final form

来完成。在

antd

中使用本机表单是否可以做到这一点？您需要比较API，您描述的属性对于表单库来说不是特殊的，并且antd支持它们。

function FormBuilder(props) {
  const { getFieldDecorator } = props.form;

  return (
    <Form>
      <Form.Item label="Phone">
        {getFieldDecorator("phone", {
          rules: [{ required: true, message: "Phone is required." }]
        })(
          <CustomInput
            mask="+7 (999) 999-99-99"
            placeholder="+7 (___) ___-__-__"
          />
        )}
      </Form.Item>
      <Button htmlType="submit" type="primary">
        Send
      </Button>
    </Form>
  );
}

const App = Form.create({ name: "form" })(FormBuilder);

function App(props) {
  return (
    <Form>
      <Form.Item label="Phone">
        <CustomInput
            mask="+7 (999) 999-99-99"
            placeholder="+7 (___) ___-__-__"
          />
      </Form.Item>
      <Button htmlType="submit" type="primary">
        Send
      </Button>
    </Form>
  );
}