Инициирование событий mouseEnter / mouseLeave в React - PullRequest
Новая
       37

Инициирование событий mouseEnter / mouseLeave в React

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

Я новичок как в 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>);}}

Спасибо, ядействительно ценю любую помощь / руководство.И, надеюсь, не так уж и плохо размещать такой большой код!

...