将 onMouseEnter 和 onMouseLeave 事件添加到音乐播放器

Question

我正在编写一个音乐播放器的应用程序，但我遇到了障碍。我正在尝试一种方法：•当我将鼠标悬停在一首歌曲上时，它会显示一个“播放”按钮来代替歌曲编号。•当前播放的歌曲显示一个“暂停”按钮代替歌曲编号。•暂停的歌曲显示“播放”按钮代替歌曲编号。我想在此方法中使用 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();                 }              }

Answer 1

在我在这里对您的代码进行的测试中，我添加了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负责有条件地显示悬停时的播放按钮和悬停时的歌曲编号。