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事件来关注列表中的一项。我的所有列表项都通过该引用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。

如何使用useRef react hook专注于列表项

1 个答案: