title: Using multiple modal forms in one component
body: <p>I have a page with many buttons, and would like each button to open its own modal form when clicked. I have a problem where using the same form/modal multiple times doesn't result in unique forms. For example, clicking the first button and then typing "asdf" into the form will also populate the form controlled by the second button.</p>
  
  <p>How can I reuse my modals/forms and still keep their data distinct?</p>
  
  <p>My code:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import 'antd/dist/antd.css';
  import './index.css';
  import { Button, Modal, Form, Input, Radio } from 'antd';
  const FormItem = Form.Item;
  
  const CollectionCreateForm = Form.create()(
    (props) =&gt; {
      const { visible, onCancel, onCreate, form } = props;
      const { getFieldDecorator } = form;
      return (
        &lt;Modal
          visible={visible}
          title="Create a new collection"
          okText="Create"
          onCancel={onCancel}
          onOk={onCreate}
        &gt;
          &lt;Form layout="vertical"&gt;
            &lt;FormItem label="Title"&gt;
              {getFieldDecorator('title', {
                rules: [{ required: true, message: 'Please input the title of collection!' }],
              })(
                &lt;Input /&gt;
              )}
            &lt;/FormItem&gt;
            &lt;FormItem label="Description"&gt;
              {getFieldDecorator('description')(&lt;Input type="textarea" /&gt;)}
            &lt;/FormItem&gt;
            &lt;FormItem className="collection-create-form_last-form-item"&gt;
              {getFieldDecorator('modifier', {
                initialValue: 'public',
              })(
                &lt;Radio.Group&gt;
                  &lt;Radio value="public"&gt;Public&lt;/Radio&gt;
                  &lt;Radio value="private"&gt;Private&lt;/Radio&gt;
                &lt;/Radio.Group&gt;
              )}
            &lt;/FormItem&gt;
          &lt;/Form&gt;
        &lt;/Modal&gt;
      );
    }
  );
  
  class CollectionsPage extends React.Component {
    state = {
      visible: false,
    };
    showModal = () =&gt; {
      this.setState({ visible: true });
    }
    handleCancel = () =&gt; {
      this.setState({ visible: false });
    }
    handleCreate = () =&gt; {
      const form = this.form;
      form.validateFields((err, values) =&gt; {
        if (err) {
          return;
        }
  
        console.log('Received values of form: ', values);
        form.resetFields();
        this.setState({ visible: false });
      });
    }
    saveFormRef = (form) =&gt; {
      this.form = form;
    }
    render() {
      return (
        &lt;div&gt;
          &lt;Button type="primary" onClick={this.showModal}&gt;New Collection&lt;/Button&gt;
          &lt;CollectionCreateForm
            ref={this.saveFormRef}
            visible={this.state.visible}
            onCancel={this.handleCancel}
            onCreate={this.handleCreate}
          /&gt;
          &lt;Button type="primary" onClick={this.showModal}&gt;New Collection&lt;/Button&gt;
          &lt;CollectionCreateForm
            ref={this.saveFormRef}
            visible={this.state.visible}
            onCancel={this.handleCancel}
            onCreate={this.handleCreate}
          /&gt;
          &lt;Button type="primary" onClick={this.showModal}&gt;New Collection&lt;/Button&gt;
          &lt;CollectionCreateForm
            ref={this.saveFormRef}
            visible={this.state.visible}
            onCancel={this.handleCancel}
            onCreate={this.handleCreate}
          /&gt;
          &lt;Button type="primary" onClick={this.showModal}&gt;New Collection&lt;/Button&gt;
          &lt;CollectionCreateForm
            ref={this.saveFormRef}
            visible={this.state.visible}
            onCancel={this.handleCancel}
            onCreate={this.handleCreate}
          /&gt;
          &lt;Button type="primary" onClick={this.showModal}&gt;New Collection&lt;/Button&gt;
          &lt;CollectionCreateForm
            ref={this.saveFormRef}
            visible={this.state.visible}
            onCancel={this.handleCancel}
            onCreate={this.handleCreate}
          /&gt;
          &lt;Button type="primary" onClick={this.showModal}&gt;New Collection&lt;/Button&gt;
          &lt;CollectionCreateForm
            ref={this.saveFormRef}
            visible={this.state.visible}
            onCancel={this.handleCancel}
            onCreate={this.handleCreate}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;CollectionsPage /&gt;, document.getElementById('container'));
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/8xxmpmmpmj" rel="nofollow noreferrer">interactive sandbox</a></p>