How do I access a DOM element in a function where this.refs is unavailable in a React app?

Question

I am making a React app and using http://marcio.github.io/react-skylight/ to implement modals.

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

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

_executeAfterModalOpen(){
     this.refs.myInput.focus();
}

But, here this refers to

Object { 
  hideOnOverlayClicked: true, 
  afterOpen: wrapMethod/<(),
  dialogStyles: Object,
  title: "Improve task", 
  children: Object,
  showOverlay: true,
  overlayStyles: Object,
  closeButtonStyle: Object
}

I may have misunderstood the question, but how/where exactly is the function "_executeAfterModalOpen" located within the overall reactjs code? — Aaron, Feb 29 '16 at 08:34

score 2 · Accepted Answer · edited Feb 29 '16 at 11:59

2

It doesn't look like you are binding the component's this reference to _executeAfterModalOpen.

Put

this._executeAfterModalOpen = this._executeAfterModalOpen.bind(this)

in your component constructor.

edited Feb 29 '16 at 11:59

David Medenjak

33,993
14
106
134

answered Feb 29 '16 at 08:54

syousif

76
1
4

score 0 · Answer 2 · answered Feb 29 '16 at 11:51

@syousif solution is correct. you need to bind the function with the context of the class. Also other than that, If you want to focus as soon as your modal loads then you have to do this in componentDidMount, so instead of the function you can do like this:

componentDidMount(){this.refs.myInput.focus();}

and you don't need to bind this function as it is Component class function.

How do I access a DOM element in a function where this.refs is unavailable in a React app?

2 Answers2