Блог

Я хотел бы воспроизвести видео на mouseeEnter и сделать паузу на mouseLeave. Каждый раз, когда я пытаюсь это сделать, я получаю TypeError: не удается прочитать свойство ‘play’ undefined.

Когда я консолью.войти e.currentTarget Я получаю правильный тег.

Это то, что я делал до сих пор

 
import { MoviesList, MoviesListEl, Title, VideoWrap, MediaWrap, MovieDesc, MobilePreview } from "./styles"

export default class FetchRandomMovies extends React.Component {
  state = {
    loading: true,
    movies: []
  }

  async componentDidMount() {
    const url = "https://itunes.apple.com/us/rss/topmovies/limit=100/json"
    const response = await fetch(url)
    const data = await response.json()

    this.setState({ movies: data.feed.entry, loading: false })
  }

  getInitialState(e) {
    return {
      isPlaying: false
    }
  }
  mouseEnter = e => {
    this.setState({ isPlaying: true })
    console.log(e)
  }
  mouseLeave = e => {
    this.setState({ isPaused: false })
  }

  render() {
    if (this.state.loading) {
      return <div>loading...</div>
    }

    if (!this.state.movies.length) {
      return <div>didn't get movies</div>
    }
    return (
      <MoviesList>
        {this.state.movies.map(item => (
          <MoviesListEl key={item.title.label}>
            <Title>
              <span>{item.title.label}</span>
              <span>{item.category.attributes.term}</span>
            </Title>
            <MediaWrap>
              <img src={item["im:image"][2].label} alt="" />
              <VideoWrap>
                <video onMouseEnter={e => this.mouseEnter(e.currentTarget).play()} controls>
                  <source src={item.link[1].attributes.href} type="video/x-m4v" />
                </video>
              </VideoWrap>
            </MediaWrap>
            <MovieDesc>{item.summary.label}</MovieDesc>
            <MobilePreview href={item.link[1].attributes.href} />
          </MoviesListEl>
        ))}
      </MoviesList>
    )
  }
}
  

Вероятно, в этой строке что-то не так:

<video onMouseEnter={e => this.mouseEnter(e.currentTarget).play()} controls>

Заранее благодарю вас

Вы вызываете .play() неправильное значение. Вы собираетесь вызвать .play() e.currentTarget , но это не то, что говорит ваш код. Ваш код вызывает .play() void возврат из this.mouseEnter(e.currentTarget) .

Вы можете исправить это несколькими способами, самый простой — вызвать play() mouseEnter обратный вызов. Поскольку предполагается, что этот обратный вызов принимает событие, мы хотим передать его e , а не e.currentTarget . Но поскольку e это аргумент по умолчанию, мы можем просто предоставить нашу функцию onMouseEnter .

 <video onMouseEnter={this.mouseEnter} controls>
  

 mouseEnter = e => {
    e.currentTarget.play();
    this.setState({ isPlaying: true });
    console.log(e);
}