ReactJS: How to access refs of child component? - coffeescript

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.

Answer 3

In this case the solution is simple, you can tell the input to autofocus, which in React focuses it when it's rendered.
Inner = React.createClass
render: ->
input { ref: 'myInput', autoFocus: true }
In general, you should pass a prop to the Inner component, and in componentDidUpdate you can do:
if #props.something
#refs.myInput.getDOMNode().focus()