Question

我对React和Javascript都是陌生的，在这里似乎找不到具体的答案，所以我想问一下。我正在尝试为学生项目制作音乐播放器应用，并且尝试使用mouseEnter / mouseLeave合并悬停事件，以便当鼠标悬停在歌曲编号（或播放按钮）上时，它会显示播放或暂停图标控制音乐。我将它放到可以单击歌曲编号的位置，它显示一个暂停按钮，您可以单击该按钮来暂停它，但随后播放按钮再也不会显示，这是我所拥有的一些（我相信是）相关的摘要：

this.state = {
  album: album,
  currentSong: album.songs[0],
  isPlaying: false,
  isHovered: false,
};

....

handleSongClick(song) {
const isSameSong = this.state.currentSong === song;
if (this.state.isPlaying && isSameSong) {
  this.pause();
} else {
  if (!isSameSong) {
    this.setSong(song);
  }
  this.play();
}
}

...

onHover(index) {
this.setState({ isHovered: index });
}

offHover() {
this.setState({ isHovered: false });
}

hoverIcon(song, index) {
const isSameSong = this.state.currentSong === song;
if (this.state.onHover === song) {
  return <span className='icon ion-md-play' />;
} else if (this.state.isPlaying && isSameSong) {
  return <span className='icon ion-md-pause' />;
} else if (this.state.onHover === index && !this.state.isPlaying) {
  return <span className='icon ion-md-play' />;
} else {
  return <span className='song-number'>{index + 1}</span>;}}

...

render() {
  return (
    <section className='album'>
      <section id='album-info'>
       <img
        id='album-cover-art'
        src={this.state.album.albumCover}
        alt={this.state.album.title}
      />
      <div className='album-details'>
        <h1 id='album-title'>{this.state.album.title}</h1>
        <h2 className='artist'>{this.state.album.artist}</h2>
        <div id='release-info'>{this.state.album.releaseInfo}</div>
      </div>
    </section>
    <table id='song-list'>
      <colgroup>
        <col id='song-number-column' />
        <col id='song-title-column' />
        <col id='song-duration-column' />
      </colgroup>
      <tbody>
        {this.state.album.songs.map((song, index) => (
          <tr
            className='song'
            key={index}
            onClick={() => this.handleSongClick(song)}
            onMouseEnter={() => this.onHover(index)}
            onMouseLeave={() => this.offHover()}
          >
            <td className='song-number'>{this.hoverIcon(song, index)} 
            </td>
            <td className='song-title'>{song.title}</td>
            <td className='song-duration'>{song.duration}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </section>);}}

非常感谢您的帮助/指导。希望发布这么多代码不是虚假的！

在React中触发mouseEnter / mouseLeave事件

0 个答案: