antD4表单重新封装时无法使用setFieldsValue方法

Question

The setFieldsValue method cannot be used when the antD4 form is reencapsulated.

Error:

this.formRef.current.setFieldsValue is not a function

Demo by codesandbox

Answer 1

The setFieldsValue method cannot be used when the antD4 form is reencapsulated.

when you create a Component and put an ant Form in it, you shouldn't expect it to behave just like an Ant Form (since you extends a React Component , not an Ant Form ). you need setFieldsValue , so you can implement it like:

import React, { PureComponent } from "react";
import { Form as Component } from "antd";

class Form extends PureComponent {
  formRef = React.createRef();

  render() {
    return <Component {...this.props} ref={this.formRef} />;
  }
  setFieldsValue(v) {
    this.formRef.current.setFieldsValue(v);
  }
  getForm() {
    return this.formRef.current;
  }
}

Form.Item = Component.Item;
export default Form;

So you can use it with:

    this.formRef.current.setFieldsValue({
      mobile: "110"
    });

Or:

    this.formRef.current.getForm().setFieldsValue({
      mobile: "110"
    });

Demo on codesandbox