Question

我有一个用于搜索的输入框，并且希望能够按下向下键将焦点从输入移动到<Link>列表的第一个。这似乎我在这里工作，因为<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()与react-router <Link>一起使用？

Answer 1

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

Answer 2

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

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

将您的链接包装在div中，然后将ref放在div本身上。链接返回带有道具的<a>标记。

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

当您访问div参考时，您可以使用.children[0]来获取标记。这是一种hacky方法，依赖于反应路由器Link始终只是呈现一个标签，但它会得到你想要的。

Answer 3

要将引用添加到<a>而不是Link组件，可以使用React Router innerRef道具。

类似 <Link to={`thing/${id}`} innerRef={`link${key}`} >...

文档在这里：https://reacttraining.com/react-router/web/api/Link/innerref-function

如何关注react-router Link

3 个答案: