反応ルータに集中する方法Link

Question

私は入力ボックスを検索に使用していて、入力から<Link>のリストの最初にフォーカスを移動するためにダウンキーを押したいと思っています。 <Link>は実際のDOMノードではないので、私がここで行ったことはうまくいかないようです。私は<Link>の代わりに<a>を使って動作させることができます。

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> 
    ) 
    } 
}) 

反応し、ルータ<Link>とfocus()を使用する方法はありますか？

Answer 1

ReactDOM.findDOMNode(this.refs['link0']).focus()を使用すると効果があります。

Answer 2

私はこれを行うには、実際の直接的な方法を見つけられませんでしたが、あなたが行うことができます一つのことがある：

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

はdivの中にあなたのリンクをラップして、div要素自体に参照を置きます。リンクは、小道具が取り付けられた<a>タグを返します。

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

divリファレンスにアクセスすると、タグを取得する.children[0]を使用できます。これはハックなアプローチであり、反応ルータに依存します。リンクは常にタグを表示するだけですが、必要なものを得ることができます。