阿超 > antdesign3.x中Form.create之后拿ref

antdesign3.x中Form.create之后拿ref

2025-07-01

前端

相关PR：

https://github.com/apache/shenyu-dashboard/pull/534

文档在此：

表单 Form - Ant Design

经过 Form.create 之后如果要拿到 ref，可以使用 rc-form 提供的 wrappedComponentRef，详细内容可以查看这里。

1
2
3
4
5
6
class CustomizedForm extends React.Component { ... }

// use wrappedComponentRef
const EnhancedForm =  Form.create()(CustomizedForm);
<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
this.form // => The instance of CustomizedForm

如何在函数组件中拿到 form 实例？#

你需要通过 forwardRef 和 useImperativeHandle 的组合使用来实现在函数组件中正确拿到 form 实例：

1
2
3
4
5
6
7
8
9
10
import React, { forwardRef, useImperativeHandle } from 'react';
import Form, { FormComponentProps } from 'antd/lib/form/Form';

const FCForm = forwardRef<FormComponentProps, FCFormProps>(({ form, onSubmit }, ref) => {
  useImperativeHandle(ref, () => ({
    form,
  }));
  `...the rest of your form`;
});
const EnhancedFCForm = Form.create<FCFormProps>()(FCForm);

使用表单组件可以写成这样：

1
2
3
4
5
6
7
8
9
const TestForm = () => {
  const formRef = createRef<Ref>();
  return (
    <EnhancedFCForm
      onSubmit={() => console.log(formRef.current!.form.getFieldValue('name'))}
      wrappedComponentRef={formRef}
    />
  );
};

在线示例：

wrappedComponentRef-in-function-component - CodeSandbox

我们可以再将组件改为class组件，也就是非函数组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React from "react";
import ReactDOM from "react-dom";
import Form, { FormComponentProps } from "antd/lib/form/Form";
import { Button, Input, Divider } from "antd";
import "antd/dist/antd.css";

interface TestFormProps extends FormComponentProps {
  onSubmit: () => void;
}

class TestForm extends React.Component<TestFormProps> {
  handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    this.props.onSubmit();
  };

  render() {
    const { form } = this.props;
    return (
      <Form
        onSubmit={this.handleSubmit}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 12 }}
      >
        <Form.Item label="name">
          {form.getFieldDecorator("name")(<Input />)}
        </Form.Item>
        <Button htmlType="submit">submit</Button>
      </Form>
    );
  }
}

const EnhancedForm = Form.create<TestFormProps>()(TestForm);

class App extends React.Component<{}, { inputValue: any }> {
  formRef = React.createRef<any>();
  state = { inputValue: undefined };

  handleSubmit = () => {
    const form = this.formRef.current.props.form;
    this.setState({
      inputValue: form.getFieldValue("name"),
    });
  };

  render() {
    return (
      <div>
        <div>I'm the value from form: {this.state.inputValue}</div>
        <Divider />
        <EnhancedForm
          onSubmit={this.handleSubmit}
          wrappedComponentRef={this.formRef}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);