如何关注react-router链接

Question

我有一个用于搜索的输入框，并且希望能够按下向下键将焦点从输入移动到<Link> s列表中的第一个。看起来我在这里不会工作，因为<Link>不是一个实际的DOM节点。尽管如此，我能够使用<a>而不是<Link>。

let Link = require('react-router').Link 

let SearchAndSelect = React.createClass({ 
    handleKeyPress: function (e) { 
    if (e.keyCode === 40) { //'down' key 
     this.refs['searchBox'].blur() 
     this.refs['link0'].focus() 
    } 
    }, 

    render: function() { 
    let ids = ['1', '2' , '3'] 

    return (
     <div> 
     <input onKeyDown={this.handleKeyPress} ref="searchBox"/> 

     <div> 
      {ids.map((id, key) => (
      <Link to={`thing/${id}`} 
       ref={`link${key}`}> 
       {id} 
      </Link>   
     ))} 
     </div> 
     </div> 
    ) 
    } 
}) 

是否有使用focus()有反应路由器<Link>的方法吗？

Answer 1

如果您使用ReactDOM.findDOMNode(this.refs['link0']).focus()它应该工作。

Answer 2

我没有找到一个真正的直接的方式做到这一点，但有一两件事你可以做的是：

<div ref={`link${key}`}> 
    <Link to={`thing/${id}`} 
    {id} 
    </Link>  
</div> 

包裹你的链接在一个div，然后把裁判的DIV本身。 Link会返回附带道具的<a>标签。

if (e.keyCode === 40) { //'down' key 
    this.refs['searchBox'].blur() 
    this.refs['link0'].children[0].focus() 
    } 

当您访问DIV裁判你可以只使用.children[0]这会抢了一个标签。这是一种拙劣的方法，依靠反应路由器Link始终只是渲染一个标签，但它会让你得到你想要的。