title: Passing a ref to component props then focus on input element on div click with React.createElement
body: <p>struggling to get my head round refs and how they work... Perhaps someone can help?</p>
  
  <p>Basically, I am trying to get the cursor to focus on the input element when I click the div, but struggling to figure out how it works. </p>
  
  <p>We click the "Rename" h4 tag </p>
  
  <pre><code>overlay = info =&gt; {
      const arr = ['Inbox', 'Business', 'Personal'];
      if (arr.indexOf(info.node.props.title) &gt;= 0) {
          return &lt;h4 onClick={() =&gt; this.newFolder(info)}&gt;New Folder&lt;/h4&gt;;
      } else {
          return (
              &lt;div&gt;
                  &lt;h4 onClick={() =&gt; this.renameFolder(info)}&gt;Rename&lt;/h4&gt;
                  &lt;h4 onClick={() =&gt; this.newFolder(info)}&gt;New Folder&lt;/h4&gt;
                  &lt;h4&gt;Delete&lt;/h4&gt;
                  {/* &lt;h4&gt;{info.node.props.title}&lt;/h4&gt; */}
              &lt;/div&gt;
          );
      }
  };
  
      renameFolder(info) {
      this.props.renameFolder({
          tree: [...this.props.tracks.tree],
          key: info.node.props.eventKey
      });
      // const e = 'theevent';
      // this.handleFocus(e);
      if (this.toolTip) {
          ReactDOM.unmountComponentAtNode(this.cmContainer);
          this.toolTip = null;
      }
      () =&gt; this.myInp.focus();
  }
  </code></pre>
  
  <p>The component.  </p>
  
  <pre><code>&lt;TreeNode
      key={item.key}
      ref={ref={(ip) =&gt; this.myInp = ip}}
      handleEditable={this.handleEditable}
      handleFocus={this.handleFocus}
      title={item.title}
      editable={true}
      draggable={false}/&gt;
  </code></pre>
  
  <p>How the component and input is created. </p>
  
  <pre><code>this.renderSelector = function() {
      var dragNodeHighlight = _this2.state.dragNodeHighlight;
      var _props6 = _this2.props;
      var title = _props6.title,
          selected = _props6.selected,
          editable = _props6.editable,
          handleEditable = _props6.handleEditable,
          handleFocus = _props6.handleFocus,
          ref = _props6.ref
  icon = _props6.icon,
          loading = _props6.loading;
      var _context$rcTree5 = _this2.context.rcTree,
          prefixCls = _context$rcTree5.prefixCls,
          showIcon = _context$rcTree5.showIcon,
          treeIcon = _context$rcTree5.icon,
          draggable =
              _props6.draggable === false ? false : _context$rcTree5.draggable,
          loadData = _context$rcTree5.loadData;
      var disabled = _this2.isDisabled();
  </code></pre>
  
  <p>The input field with the passed down ref prop. </p>
  
  <pre><code>    var $title =  React.createElement('input', {
              type: 'text',
              value: title,
              className: 'rc-input-text',
              onChange: handleEditable,
              onFocus: handleFocus,
              ref: ref
          });
  </code></pre>