如何使用 useRef 反应钩子关注列表项

问题描述

我有一个动态生成的列表项数组

const  ArtistProfile = props => {
  // api data
  const tracks = props.data.artistTopTracks && props.data.artistTopTracks.tracks
  const [songs, setSongs] = useState(null)
  const songRef = useRef(null)
  // effect hook that creates list of SongListItem components
  useEffect(() => {
    if (tracks) {
      const trackTags = tracks.map((track, index) => {
        if (index > 4) return 
        return (
          <SongListItem ref={songRef} role="button" key={track.id} onClick={() => songRef.current.focus()}>
            <SongTag
              image={track.album.images[1].url}
              duration={msToTime(track.duration_ms)}
              name={track.name}
              explicit={track.explicit}
            />
          </SongListItem>
        )
      })
      setSongs(trackTags)
    }
  }, [tracks])
  return (
    <ArtistProfileContainer>
      <ul>{songs}</ul>
    </ArtistProfileContainer>
  )
}

我试图使用onClick事件来关注列表中的一项。 我所有的列表项都传递了这个 ref const songRef = useRef(null)并且我正在使用songRef.current属性来关注我点击的元素。 单击时这不关注任何内容，因此我的样式都没有改变。

const SongListItem = styled.li`
  background-color: #1d1d1d;
  :focus {
    svg {
      opacity: 0.7;
    }
    background-color: #181818;
  }
`

我正在尝试实现您在此 Spotify 链接上看到的相同结果

如果您将鼠标悬停在“流行”歌曲上，您会看到样式暂时发生变化，但是一旦您单击它，就会保持更改，直到您单击另一首歌曲为止。