Как сфокусироваться на элементе списка с помощью крюка реакции useRef - PullRequest
Новая
       8

Как сфокусироваться на элементе списка с помощью крюка реакции useRef

0 голосов
/ 25 февраля 2019

У меня есть динамически сгенерированный массив элементов списка 

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

Если вы наводите курсор на «Популярные» песни, вы видите, что стили временно меняются, но как только вы нажимаете, они сохраняют изменения, пока вы не нажмете другую песню.

1 Ответ

0 голосов
/ 25 февраля 2019

Вы просто не можете сосредоточиться на li: https://stackoverflow.com/a/30213871/7763883

Добавить 

<li tabIndex="-1" ...

И это будет работать.

В вашем примере есть tabIndex.

...