docs: should not use ref for wrapped form, close: #9598 (#9685)

.eslintrc.js

@@ -63,6 +63,7 @@ if (process.env.RUN_ENV === 'DEMO') {
     'eol-last': 0,
     'prefer-rest-params': 0,
     'react/no-multi-comp': 0,
+    'react/prefer-stateless-function': 0,
     'jsx-a11y/href-no-hash': 0,
     'import/newline-after-import': 0,
   });

components/form/demo/form-in-modal.md

@@ -18,41 +18,43 @@ import { Button, Modal, Form, Input, Radio } from 'antd';
 const FormItem = Form.Item;
 
 const CollectionCreateForm = Form.create()(
-  (props) => {
-    const { visible, onCancel, onCreate, form } = props;
-    const { getFieldDecorator } = form;
-    return (
-      <Modal
-        visible={visible}
-        title="Create a new collection"
-        okText="Create"
-        onCancel={onCancel}
-        onOk={onCreate}
-      >
-        <Form layout="vertical">
-          <FormItem label="Title">
-            {getFieldDecorator('title', {
-              rules: [{ required: true, message: 'Please input the title of collection!' }],
-            })(
-              <Input />
-            )}
-          </FormItem>
-          <FormItem label="Description">
-            {getFieldDecorator('description')(<Input type="textarea" />)}
-          </FormItem>
-          <FormItem className="collection-create-form_last-form-item">
-            {getFieldDecorator('modifier', {
-              initialValue: 'public',
-            })(
-              <Radio.Group>
-                <Radio value="public">Public</Radio>
-                <Radio value="private">Private</Radio>
-              </Radio.Group>
-            )}
-          </FormItem>
-        </Form>
-      </Modal>
-    );
+  class extends React.Component {
+    render() {
+      const { visible, onCancel, onCreate, form } = this.props;
+      const { getFieldDecorator } = form;
+      return (
+        <Modal
+          visible={visible}
+          title="Create a new collection"
+          okText="Create"
+          onCancel={onCancel}
+          onOk={onCreate}
+        >
+          <Form layout="vertical">
+            <FormItem label="Title">
+              {getFieldDecorator('title', {
+                rules: [{ required: true, message: 'Please input the title of collection!' }],
+              })(
+                <Input />
+              )}
+            </FormItem>
+            <FormItem label="Description">
+              {getFieldDecorator('description')(<Input type="textarea" />)}
+            </FormItem>
+            <FormItem className="collection-create-form_last-form-item">
+              {getFieldDecorator('modifier', {
+                initialValue: 'public',
+              })(
+                <Radio.Group>
+                  <Radio value="public">Public</Radio>
+                  <Radio value="private">Private</Radio>
+                </Radio.Group>
+              )}
+            </FormItem>
+          </Form>
+        </Modal>
+      );
+    }
   }
 );
 
@@ -67,7 +69,7 @@ class CollectionsPage extends React.Component {
     this.setState({ visible: false });
   }
   handleCreate = () => {
-    const form = this.form;
+    const form = this.formRef.props.form;
     form.validateFields((err, values) => {
       if (err) {
         return;
@@ -78,15 +80,15 @@ class CollectionsPage extends React.Component {
       this.setState({ visible: false });
     });
   }
-  saveFormRef = (form) => {
-    this.form = form;
+  saveFormRef = (formRef) => {
+    this.formRef = formRef;
   }
   render() {
     return (
       <div>
         <Button type="primary" onClick={this.showModal}>New Collection</Button>
         <CollectionCreateForm
-          ref={this.saveFormRef}
+          wrappedComponentRef={this.saveFormRef}
           visible={this.state.visible}
           onCancel={this.handleCancel}
           onCreate={this.handleCreate}