如何获取使用 .map 呈现的第一个元素的 ref？

IT技术 javascript reactjs ref
2021-05-13 23:29:30

我需要在几行中显示视频（卡片）的缩略图并专注于第一个缩略图。我使用嵌套地图进行了显示。该代码基本上迭代视频数组并返回多行中的视频。

我们如何专注于呈现的第一个元素？我认为我们需要获取第一个要关注的元素的 ref。但是我们如何在这里设置 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>
  );
}
2个回答

也许使用查找表对象或数组，并按索引（或 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>

你好 react hook 在这里我希望这可以帮助你可以使用 tabIndex 定位第一个元素。

    const elementRef = useRef();

    useEffect(() => {

        if (elementRef.current.tabIndex === 0) {

            elementRef.current.click();

        }

    }, []);


    return (
        
        <div tabIndex={index} ref={elementRef} id={`${activeLink === index ? "selected" : ""}`}

        </div>

    )
其它你可能感兴趣的问题
上一篇AdBlock 到 ReactJs 下一篇如何在 Gatsby URL 中输入发布日期？