我正在編寫一個音樂播放器的應用程序，但我遇到了障礙。我正在嘗試一種方法：?當我將鼠標懸停在一首歌曲上時，它會顯示一個“播放”按鈕來代替歌曲編號。?當前播放的歌曲顯示一個“暫?！卑粹o代替歌曲編號。?暫停的歌曲顯示“播放”按鈕代替歌曲編號。我想在此方法中使用 onMouseEnter 和 onMouseLeave 事件，但我不知道從哪里開始這是我的專輯組件import React, { Component } from 'react';import albumData from './../data/albums';class Album extends Component { constructor(props) { super(props); const album = albumData.find( album => { return album.slug === this.props.match.params.slug }); this.state = { album: album, currentSong: album.songs[0], isPlaying: false }; this.audioElement = document.createElement('audio'); this.audioElement.src = album.songs[0].audioSrc; } play() { this.audioElement.play(); this.setState({ isPlaying: true }); } pause() { this.audioElement.pause(); this.setState({ isPlaying: false }); } setSong(song) { this.audioElement.src = song.audioSrc; this.setState({ currentSong: song }); } handleSongClick(song) { const isSameSong = this.state.currentSong === song; if (this.state.isPlaying && isSameSong) { this.pause(); } else { if (!isSameSong) { this.setSong(song); } this.play(); } }
1 回答
DIEA
TA貢獻1820條經驗 獲得超2個贊
在我在這里對您的代碼進行的測試中，我添加了showPlayOnHover屬性以將其聲明為 false，以處理懸停時出現的按鈕。
添加了渲染或不渲染按鈕的方法：
handlePlayOnHover = (song) => {
this.setState({
showPlayOnHover: !this.state.showPlayOnHover,
isPlaying: !this.state.isPlaying
})
this.handleSongClick(song)
}
歌曲渲染結構更新為：
<tr
className="song" key={index}
onClick={() => this.handleSongClick(song)}
onMouseOver={() => this.handleOnHover(song)}
onMouseOut={() => this.handleOnHover(song)}
>
<td className="song-actions">
<button>
<span className="song-number">
{!this.state.showPlayOnHover ? index+1 : <span className="ion-play"></span>}
</span>
<span className="ion-play"></span>
<span className="ion-pause"></span>
</button>
</td>
<td className="song-title">{song.title}</td>
<td className="song-duration">{song.duration}</td>
</tr>
方法handleOnHover負責有條件地顯示懸停時的播放按鈕和懸停時的歌曲編號。
添加回答
舉報
0/150
提交
取消