Changed ref to use function instead of dep strings

Author: dozoisch

src/recaptcha.js

@@ -6,6 +6,7 @@ export default class ReCAPTCHA extends React.Component {
     super();
     this.state = {};
     this.handleExpired = this.handleExpired.bind(this);
+    this.handleRecaptchaRef = this.handleRecaptchaRef.bind(this);
   }
 
   getValue() {
@@ -40,7 +41,7 @@ export default class ReCAPTCHA extends React.Component {
 
   explicitRender(cb) {
     if (this.props.grecaptcha && this.state.widgetId === undefined) {
-      const id = this.props.grecaptcha.render(this.refs.captcha, {
+      const id = this.props.grecaptcha.render(this.captcha, {
         sitekey: this.props.sitekey,
         callback: this.props.onChange,
         theme: this.props.theme,
@@ -65,13 +66,17 @@ export default class ReCAPTCHA extends React.Component {
     this.explicitRender();
   }
 
+  handleRecaptchaRef(elem) {
+    this.captcha = elem;
+  }
+
   render() {
     // consume properties owned by the reCATPCHA, pass the rest to the div so the user can style it.
     /* eslint-disable no-unused-vars */
     const { sitekey, onChange, theme, type, tabindex, onExpired, size, stoken, grecaptcha, badge, ...childProps } = this.props;
     /* eslint-enable no-unused-vars */
     return (
-      <div {...childProps} ref="captcha" />
+      <div {...childProps} ref={this.handleRecaptchaRef} />
     );
   }
 }