在 React 中使用 JS 在 mouseOver 上播放视频

Question

只是想让这些视频在鼠标悬停时播放。我可以从控制台看到我需要创建一个函数而不是使用字符串（其他SO答案使用字符串），那么如何在不创建太多额外代码的情况下做到这一点？理想情况下，我希望在 onMouseOver 和 onMouseOut 属性上设置正确的功能。

\n\n

        <video \n          poster="https://i.imgur.com/Us5ckqm.jpg"\n          onMouseOver="this.play()" \n          onMouseOut="this.pause();this.currentTime=0;"\n          src={`${vid.videos.tiny.url}#t=1`}\n        </video>\n

\n\n

也尝试过

\n\n

        <video \n          poster="https://i.imgur.com/Us5ckqm.jpg"\n          onMouseOver={() => this.play()}\n          onMouseOut={() => this.pause()}\n          src={`${vid.videos.tiny.url}#t=1`} >\n        </video>\n

\n\n

这给了我错误：无法读取未定义的属性“play”。

\n\n

编辑不确定这是否相关，但上面的代码驻留在地图函数内，该函数也是 get 请求的一部分。这是完整的功能：

\n\n

  const fetchVideos = async (amount, category) => {\n    const response = await axios.get(\'https://pixabay.com/api/videos/\', {\n      params: {\n        key: \'123456123456123456\',\n        per_page: amount,\n        category: category\n      }\n    })\n    console.log(response)\n    const vidsAsHtml = response.data.hits.map(vid => {\n      return (\n        <div className={`${props.page}--grid-content-wrapper`} key={vid.picture_id}>\n          <div className={`${props.page}--grid-video`}>\n            <video className=".video"\n              poster="https://i.imgur.com/Us5ckqm.jpg"\n              onMouseOver={() => this.play()}\n              onMouseOut={() => this.pause()}\n              src={`${vid.videos.tiny.url}#t=1`} >\n            </video>\n          </div>\n          <div className={`${props.page}--grid-avatar-placeholder`}></div>\n          <div className={`${props.page}--grid-title`}>{vid.tags}</div>\n          <div className={`${props.page}--grid-author`}>{vid.user}</div>\n          <div className={`${props.page}--grid-views`}>{abbreviateNumbersOver999(vid.views)} \n            <span className={`${props.page}--grid-date`}> \xe2\x80\xa2 6 days ago</span>\n          </div>\n        </div>\n      )\n  })\n  setResource(vidsAsHtml)\n}\n

\n\n

编辑2：似乎其他人对映射语句中的“this”关键字有问题。尽管我尝试了这些解决方案，但“this”仍然未定义。

\n

Answer 1

一位名叫Felix Kling的用户给出了一个非常简单的答案，解决了我在这篇文章中的问题：

事件处理程序 props 应该传递一个函数。this.play()目前，您正在尝试将和 的返回值this.pause()作为事件处理程序传递，但这无论如何都行不通。

此外，React 不会通过 使该元素可供事件处理程序使用 this，但您可以通过以下方式访问它event.target：

<video
  poster="https://i.imgur.com/Us5ckqm.jpg"
  onMouseOver={event => event.target.play()}
  onMouseOut={event => event.target.pause()}
  src={`${vid.videos.tiny.url}#t=1`} >
</video>

在这里找到可行的解决方案。