title: Cleaner way to change focus on child components in React
body: <p>I'm trying to figure out a cleaner way to use arrow keys to move focus up and down in a list of inputs using React. The list is the parent component, the input the children. In order to figure out what input should be focused next, I'm giving each child a <code>ref</code> as well as a numeric <code>id</code> that I use to track ordering. When an arrow key is detected, the callback then finds the child with the correct <code>ref</code> and goes into that child's <code>refs</code> to grab the input and give it focus. </p>
  
  <p>I'm new at React, this feels quite dirty, thus I'm wondering if there's a cleaner solution.</p>
  
  <p>Code and working jsfiddle:</p>
  
  <pre><code>var Child = React.createClass({
      handleUp: function(e) {
          switch(e.key) {
              case "ArrowDown":
                  this.props.handleFocus(this.props.id+1);
              break;
              case "ArrowUp":
                  this.props.handleFocus(this.props.id-1);            
              break;
          }
      },
      render: function() {
          return &lt;div&gt;&lt;input defaultValue={this.props.name} onKeyUp={this.handleUp} ref="input" /&gt;&lt;/div&gt;;
      }
  });
  
  var Parent = React.createClass({
      handleFocus: function(id) {
          var child = this.refs['child' + id];
          if (!child) return;
          var input = child.refs.input;
          input.getDOMNode().focus();
      },
      render: function() {
          var inputs = [];
          for (var i=0; i&lt;10; i++) {
              inputs.push(&lt;Child key={i} id={i} name={"value" + i} handleFocus={this.handleFocus} ref={'child' + i} /&gt;);
          }
          return &lt;div&gt;
              {inputs}
          &lt;/div&gt;;
      }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/69z2wepo/509/">http://jsfiddle.net/69z2wepo/509/</a></p>