ReactJS: How to access refs of child component?

Question

I'm writing the code in CoffeeScript since I've been writing React with it.
Here is the basic structure.

{ div, input } = React.DOM  Outer = React.createClass   render: ->     div { id: 'myApp' },       Inner()  Inner = React.createClass   render: ->     input { id: 'myInput', ref: 'myInput' } 

I have a toggle method on my Outer class which is triggered by pressing a shortcut. It toggles the visibility of my app.
When my app is toggled from hidden to shown, I want to focus on the input.

Now the toggle methods look more or less like this:

Outer = React.createClass   render: ->      ......    hide: ->     @setState { visible: no }    show: ->     @setState { visible: yes }      $('#myInput').focus() # jQuery     # I want to do something like     # @refs.myInput.getDOMNode().focus()     # But @refs here is empty, it doesn't contain the refs in Inner    toggle: ->     if @state.visible       @hide()     else       @show() 

How do I do this then?

Answer 1

Accessing the refs of a child breaks encapsulation since refs are not considered part of a component's API. Instead you should expose a function on Inner that can be called by a parent component, calling it focus might make sense.

Also, focus the element in componentDidUpdate to ensure rendering is complete:

{ div, input } = React.DOM  Outer = React.createClass   render: ->     div { id: 'myApp' },       Inner({ref: 'inner'})    componentDidUpdate: (prevProps, prevState) ->     # Focus if `visible` went from false to true     if (@state.visible && !prevState.visible)       @refs.inner.focus()    hide: ->     @setState { visible: no }    show: ->     @setState { visible: yes }    toggle: ->     if @state.visible       @hide()     else       @show()  Inner = React.createClass   focus: ->     @refs.myInput.getDOMNode().focus()    render: ->     input { id: 'myInput', ref: 'myInput' } 

Answer 2

You can chain refs, so if you pull an element by ref, you can grab refs inside that element:

Defining your Outer class as Outer = React.createClass render: -> div { id: 'myApp' }, Inner {ref: 'inner'}

would let you then grab the input with @refs.inner.refs.myInput.getDOMNode() to call focus on.