javascript - 如何使用 useRef react hook 关注列表项

Question

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

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 链接上看到的相同的结果 https://open.spotify.com/artist/5K4W6rqBFWDnAN6FQUkS6x

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

Answer 1

你只是不能专注于 li: https://stackoverflow.com/a/30213871/7763883

添加

<li tabIndex="-1" ...

它会起作用。

您的示例中有 tabIndex。