"this"关键字在映射语句(React)中未定义

Question

vidsAsHtml映射函数中的this关键字不断返回undefined。

我读了这篇文章，以及其他一些关于这个问题的SO问题，但他们的解决方案并没有解决问题。我已经在为地图使用 es6 语法箭头函数，但我也尝试将其作为第二个参数，但这并没有解决问题。好奇是否有人知道为什么"this"关键字在这里一直未定义。

import React, { useState, useEffect } from 'react'
import axios from 'axios'
const VideoGrid = (props) => {
const [videos, setResource] = useState([])
const fetchVideos = async (amount, category) => {
const response = await axios.get('https://pixabay.com/api/videos/', {
params: {
key: '123456679',
per_page: amount,
category: category
}
})
console.log(response)
const vidsAsHtml = response.data.hits.map(vid => {
return (
<div className={`${props.page}--grid-content-wrapper`} key={vid.picture_id}>
<div className={`${props.page}--grid-video`}>
<video
poster="https://i.imgur.com/Us5ckqm.jpg"
onMouseOver={this.play()}
onMouseOut={this.pause()}
src={`${vid.videos.tiny.url}#t=1`} >
</video>
</div>
<div className={`${props.page}--grid-avatar-placeholder`}></div>
<div className={`${props.page}--grid-title`}>{vid.tags}</div>
<div className={`${props.page}--grid-author`}>{vid.user}</div>
<div className={`${props.page}--grid-views`}>{vid.views} 
<span className={`${props.page}--grid-date`}> • 6 days ago</span>
</div>
</div>
)
})
setResource(vidsAsHtml)
}
useEffect(() => {
fetchVideos(50, 'people')
}, []) 
return (
<main className={`${props.page}--grid-background`}>
<nav className={`${props.page}--grid-nav`}>
<button 
id='followButton' 
className={`${props.page}--grid-nav-${props.titleOne}`} 
>{props.titleOne}
</button>
<button 
id='recommendedButton' 
className={`${props.page}--grid-nav-${props.titleTwo}`} 
>{props.titleTwo}
</button>
<button 
id='subscriptionsButton' 
className={`${props.page}--grid-nav-${props.titleThree}`} 
>{props.titleThree}
</button>
<button className={`${props.page}--grid-nav-${props.titleFour}`}>{props.titleFour}</button>
<button className={`${props.page}--grid-nav-${props.titleFive}`}>{props.titleFive}</button>
<button className={`${props.page}--grid-nav-follow`}>FOLLOW</button>
</nav>
<hr className={`${props.page}--grid-hr-nav-grey`} />
<hr className={`${props.page}--grid-hr-nav-black`} />        
<div className={`${props.page}--grid`} style={{marginTop: 'unset'}}>
{videos}
</div>
</main>
)
}

export default VideoGrid

Answer 1

事件处理程序 prop 应该被传递一个函数。目前，您正在尝试将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>

Answer 2

你可以为此使用ref，

let vidRef = React.createRef();

您应该单独创建函数，

const playVideo = () => {
// You can use the play method as normal on your video ref
vidRef.current.play();
};
const pauseVideo = () => {
// Pause as well
vidRef.current.pause();
};

提供参考video，

<video
ref = {vidRef}   //Provide ref here
poster="https://i.imgur.com/Us5ckqm.jpg"
onMouseOver={() => playVideo()}
onMouseOut={() => pauseVideo()}
src={`${vid.videos.tiny.url}#t=1`} >
</video>

演示