重新封装antD4表单时，不能使用setFieldsValue方法

Question

重新封装antD4表单时，不能使用setFieldsValue方法。

错误：

this.formRef.current.setFieldsValue is not a function

codesandbox 演示

Answer 1

重新封装antD4表单时，不能使用setFieldsValue方法。

当您创建一个组件并将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"
});

codesandbox 演示