在渲染组件后,将焦点设置在特定文本字段上的反应方式是什么?
文档似乎建议使用refs,例如:
ref="nameInput"在渲染函数的输入字段中设置,然后调用:
this.refs.nameInput.getInputDOMNode().focus();
Run Code Online (Sandbox Code Playgroud)
但我应该在哪里打电话呢?我尝试了几个地方,但我无法让它工作.
我需要在几行中显示视频(卡片)的缩略图,并专注于第一个缩略图.我使用嵌套地图进行了显示.代码基本上遍历视频数组并返回多行视频.
我们如何专注于渲染的第一个元素?我想我们需要得到第一个要关注的元素的参考.但是我们如何在这里设置ref并在另一个函数中引用它?
const CategoryGrid = props => {
return (
<HotKeys handlers={handlers}>
<div className="grid-container">
<p className="title"> {props.title.toUpperCase()} </p>
<div className="grid">
{
props.videos.map((rowvideos,index) => {
var rowVideoArr = [];
rowvideos.map((video,key)=>{
rowVideoArr.push(<div key={video.id} className="fleft card-container grow">
<Card key={video.id} title={video.name} background={video.thumbnailUrl}/>
</div>)
})
return(<div className="row" key={index}>{rowVideoArr}</div>)
})
}
</div>
</div>
</HotKeys>
);
}
Run Code Online (Sandbox Code Playgroud)