如何解决在滑动 React JS 上获取数组中的下一项
我正在尝试制作一个简单的音乐播放器。我使用 react-h5-audio-player 作为我的播放器,它为我提供了一些事件道具,例如 onClickNext。我正在尝试将其用作滑动功能。我有向下滑动功能,它传递我所在州的方向,例如“左”和“右”。我将如何添加在滑动时更改歌曲的功能?我试过了
const song = songs[currentSong];
const NextSong = songs[currentSong + 1]
src={direction === 'right' ? nextSong.preview : song.preview}
它会跳到下一首歌,但仅此而已。
感谢您的帮助!
import React,{ useContext,useState } from 'react';
import { SongContext } from '../../SongContext';
import { SkipContext } from '../../SkipContext';
import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';
import './Player.css';
const Player = () => {
const { songs } = useContext(SongContext);
const { direction } = useContext(SkipContext);
const [currentSong,setCurrentSong] = useState(0);
const song = songs[currentSong];
console.log(currentSong);
if (!song) return null;
return (
<div className="player">
<AudioPlayer
// autoPlay
src={song.preview}
showSkipControls={true}
customVolumeControls={[]}
customAdditionalControls={[]}
onPlay={() => console.log('playing')}
onEnded={() => setCurrentSong((i) => i + 1)}
onClickNext={() => setCurrentSong((i) => i + 1)}
/>
</div>
);
};
export default Player;
/* <i class="fas fa-pause-circle fa-3x"></i> */
// }<i class="fas fa-play-circle fa-3x"></i>
// direction === 'right'
// ? nextSong.preview
// : direction === 'left '
// ? previousSong.preview
// : song.preview
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。