How do I access a DOM element in a function where this.refs is unavailable in a React app?
<p>I am making a React app and using <a href="http://marcio.github.io/react-skylight/" rel="nofollow">http://marcio.github.io/react-skylight/</a> to implement modals.</p>

<pre><code>export default class SomeComponent extends Component {
  ...
  render() {
    return (
      ...
        &lt;SkyLight ref="improveTaskModal"&gt;
          &lt;form&gt;
            &lt;input type="text" ref="myInput" /&gt;
      ...
    );
  }
}
</code></pre>

<p>I want to focus on the input element as soon as the modal opens up. So, I tried doing</p>

<pre><code>_executeAfterModalOpen(){
     this.refs.myInput.focus();
}
</code></pre>

<p>But, here <code>this</code> refers to</p>

<pre><code>Object { 
  hideOnOverlayClicked: true, 
  afterOpen: wrapMethod/&lt;(),
  dialogStyles: Object,
  title: "Improve task", 
  children: Object,
  showOverlay: true,
  overlayStyles: Object,
  closeButtonStyle: Object
}
</code></pre>