title: Emulate onFocus and traverse Nodes with React JSX
body: <p>I would like to emulate a Tab event, only with a down arrow key, in a React component.  </p>
  
  <p>This seems pretty simple on a first glance, when it is a single input using <a href="https://facebook.github.io/react/docs/refs-and-the-dom.html" rel="nofollow noreferrer">ref callbacks</a>.  However, I will have three lists of search results li's with an a href in them.</p>
  
  <p>Does any one have a better approach than the below?</p>
  
  <p>P.S: And I know, why recreate the tab function? ... a clients request! :-( </p>
  
  <p><strong>A little sample code:</strong></p>
  
  <pre><code>import React, { Component } from "react"
  
  export default class TestList extends Component {
      constructor(props){
          super(props);
          this.state = {
              focusedItem: 0,
          }
          this.nextFocus = this.nextFocus.bind(this)
          this.handleKey = this.handleKey.bind(this)
      };
  
      componentDidMount() {
          const list = this.refs.list.children
          if (list.length &gt; 0) {
              let item = list[0]
              // console.log(item.id)
              // console.log(item.tabIndex)
              let current = item.tabIndex
              this.setState({
                  focusedItem: current,
              })
              item.getDOMNode().focus();
          }
      }
  
      upState() {
          if (this.state.focusedItem === 0) {
              this.setState({
                  focusedItem: 1,
              });
          } 
          else {
              let current = this.state.focusedItem
              let nextState = current+1
              console.log(nextState)
              this.setState({
                  focusedItem: nextState,
              });
          }
      }
  
      nextFocus() {
          const list = this.refs.list.children
          this.upState();
  
          const item = list[this.state.focusedItem]
          console.log(item)
          if (this.state.focusedItem &lt; list.length) {
              item.getDOMNode().focus();
          }
  
      }
  
  
      handleKey(event) {
          switch(event.keyCode){
              case 9:    // Enter key
                  break;
              case 13:    // Enter key
                  break;
              case 27:    // Esc key
                  break;
              case 32:    // spacebar
                  break;
              case 37:    // left
                  break;
              case 38:    // up
                  break;
              case 39:    // right
                  this.nextFocus();
                  break;
              case 40:    // down
                  this.nextFocus();
                  // React.findDOMNode() ???
                  //onFocus DOMEventTarget relatedTarget
                  break;
              default:
          }
  
      }
  
      render() {
          const navList = [
              {
                  name:'please',
                  link:'/#',
              }, { 
                  name:'please 2',
                  link:'/#' 
              }, {
                  name:'please 3',
                  link:'/#' 
              }, {
                  name:'please 4',
                  link:'/#' 
              }
          ];
  
          return (
              &lt;ul ref='list'&gt;
                  { navList.map((item, index) =&gt; {
                      return (
                          &lt;li key={index} 
                              ref={'lidx'+index} 
                              id={'elid-'+index} 
                              onClick={ this.focus } 
                              tabIndex={index}
                              onKeyDown={this.handleKey} &gt;
                                  &lt;b&gt;{item.name}&lt;/b&gt;
                          &lt;/li&gt;
                      );
                  })}
              &lt;/ul&gt;
          )
      }
  }
  </code></pre>