マップからレンダリングされる最初の要素のrefを取得する方法に反応します。

Question

私は、ビデオ（カード）のサムネイルをいくつかの行に表示し、最初のサムネイルに焦点を当てる必要があります。私はネストされたマップを使って表示を行った。コードは基本的にはビデオ配列を反復処理し、複数行のビデオを返します。

どのようにレンダリングする最初の要素に焦点を当てますか？最初の要素に焦点を当てる必要があると私は思う。しかし、ここで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> 
); 
} 

Answer 1

ルックアップテーブルオブジェクトを使用し、そのインデックス（またはID）ですべての参照をそこに格納することがあります。
コンポーネントがマウントされると、フォーカスイベントを最初のイベント（またはキーまたはIDによって他のイベントイベント）でトリガできます。

入力を備えたシンプルな例：

const videos = [ 
 
    { name: 'video 1' }, 
 
    { name: 'video 2' }, 
 
    { name: 'video 3' }, 
 
]; 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.videoRefs = []; 
 
    } 
 

 
    componentDidMount() { 
 
    this.videoRefs[0] && this.videoRefs[0].focus(); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div > 
 
     { 
 
      videos.map((video, index) => (
 
      <input 
 
       key={index} 
 
       value={video.name} 
 
       ref={ref => this.videoRefs[index] = ref} 
 
      /> 
 
     )) 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>