Merge pull request formio#327 from j-perl/improvement/custom-component-ref-callback

pass down a ref callback to custom component instead of relying on the r…

Author: travist

src/components/ReactComponent.jsx

@@ -11,6 +11,7 @@ export default class ReactComponent extends Field {
    */
   constructor(component, options, data) {
     super(component, options, data);
+    this.reactInstance = null;
   }
 
   /**
@@ -41,6 +42,15 @@ export default class ReactComponent extends Field {
     return super.render(`<div ref="react-${this.id}"></div>`);
   }
 
+  /**
+   * Callback ref to store a reference to the node.
+   *
+   * @param element - the node
+   */
+  setReactInstance(element) {
+    this.reactInstance = element;
+  }
+
   /**
    * The third phase of component building where the component has been attached to the DOM as 'element' and is ready
    * to have its javascript events attached.
@@ -58,7 +68,7 @@ export default class ReactComponent extends Field {
     });
 
     if (this.refs[`react-${this.id}`]) {
-      this.reactInstance = this.attachReact(this.refs[`react-${this.id}`]);
+      this.attachReact(this.refs[`react-${this.id}`], this.setReactInstance.bind(this));
       if (this.shouldSetValue) {
         this.setValue(this.dataForSetting);
         this.updateValue(this.dataForSetting);
@@ -82,8 +92,9 @@ export default class ReactComponent extends Field {
    * Override this function to insert your custom component.
    *
    * @param element
+   * @param ref - callback ref
    */
-  attachReact(element) {
+  attachReact(element, ref) {
     return;
   }