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

Question

错误：

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.

当您创建一个组件并在其中放置一个 ant Form 时，您不应期望它的行为就像一个 Ant Form（因为您扩展了一个 React Component，而不是一个Ant Form)。你需要 setFieldsValue，所以你可以这样实现它：

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;

因此您可以将其用于：

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

或：

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

Demo on codesandbox

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

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

javascript

reactjs

ant-design-pro