title: How to set ref of a Form Item inside a 'antd' Form in ReactJS?
body: <p>With similar approach able to get the desired refs in Form.Control when I am using react-bootstrap Form</p>
  
  <p>But not getting the refs when using antd forms in ReactJS</p>
  
  <pre><code>&lt;Form.Item&gt;        
     &lt;Input placeholder='Name' size='large'  ref="usernameref"  /&gt;
   &lt;/Form.Item&gt;
  </code></pre>
  
  <p>not able to access this ref in other place like on button click of the button inside the form</p>
  
  <p>The entire code below</p>
  
  <pre><code>import React from "react";
  //import { Modal, Form ,Button } from "react-bootstrap";
  import { connect } from "react-redux";
  import { bindActionCreators } from "redux";
  import { addUser, updateUser, loadoff, loadon} from "../actions/action.js";
  import { Button, Form, Modal ,Input } from "antd";
  
  class UserModalWindow extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        loading: false,
        update: this.props.update,
        rowindex: this.props.rowindextoupdate
      };
    }
  
  
    static getDerivedStateFromProps(props, state) {
      return { rowindex: props.rowindextoupdate };
    }
  
    render() {
      async function wait(duration = 2000) {
        await new Promise(resolve =&gt; setTimeout(resolve, duration));
      }
  
  
      const layout = {
        labelCol: { span: 24 },
        wrapperCol: { span: 24 },
      };
  
      return (
  
        &lt;Modal   {...this.props}  title="User Form" &gt;
  
        &lt;Form
        {...this.props}
        {...this.layout}
        name="basic"
        &gt;
        &lt;Form.Item
            label='Name'
            name='name'
            rules={[{ required: true, message: 'Please input your name' }]}&gt;
  
            &lt;Input placeholder='Name' size='large'  ref="usernameref"  /&gt;
        &lt;/Form.Item&gt;
  
        &lt;Form.Item
          label='Email'
          name='email'
  
          rules={[
            {
              type: 'email',
              message: 'The input is not valid mail.',
            },
            {
              required: true,
              message: 'Please input your mail id',
            },
          ]}&gt;
          &lt;Input placeholder='Email' size='large' ref="usermailref"/&gt;
        &lt;/Form.Item&gt;
  
  
        &lt;Button  loading={this.props.loader.loading}  onClick = {async()=&gt;
                          {
                              var obj = {}
  
                                obj.field1 = this.refs.usernameref.value ;  // here both the refs are undefined
                                obj.field2 = this.refs.usermailref.value;
  
                                  console.log(this.refs)
  
                                  this.props.loadon();
                                  await wait();
                                  this.props.loadoff();
  
                                  if(this.state.update === 'true')
                                     {
                                         obj.index = this.state.rowindex.index ;
                                         this.props.updateUser(obj);
                                      }
                                  else
                                 {
                                  console.log(obj)
                                  this.props.addUser(obj);
                                 }
  
                                  this.props.onHide();
  
                          }}
                          &gt; Save&lt;/Button&gt;
  
      &lt;/Form&gt;
      &lt;/Modal&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      loader: state.loader
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators({ addUser, updateUser, loadon, loadoff }, dispatch);
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(UserModalWindow);
  </code></pre>
  
  <p>But using React-bootstrap  Forms  works as desired
  What might be the reason? Do I need to use DecoratorField?</p>