chevin99 chevin99 - 1 month ago 32
React JSX Question

How to focus a react-router Link

I have an input box used for searching, and want to be able to press the down key to move focus from the input to the first of a list of

<Link>
s. It seems what I have here won't work, since
<Link>
isn't an actual DOM node. I am able to get it to work using
<a>
instead of
<Link>
though.

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


Is there a way to use
focus()
with a react-router
<Link>
?

Answer

If you use ReactDOM.findDOMNode(this.refs['link0']).focus() it should work.

Comments