javascript - 如何从 React Img 组件获取值

Question

我在“handleClickVideo”中的console.log 中不断收到未定义信息。如何正确地获取点击视频的值(value)？我也尝试过使用 div，但是 div 没有 value 属性。我以为 Img 做到了。

const Videos = ({ videos }) => {

const handleClickVideo = (event) => {
    console.log(event.target.value)
}

return (
    <>
        <h2 className="title is-5">Videos</h2>
        <div className="columns is-multiline">
        <VideoModal 
            videoOpen={videoOpen}
            setVideoClose={handleClickVideo}
        />
            {
                videos.map((video, key) => {
                    return (
                        <div className="column is-one-third">
                            <div className={styles.thumbnail}>
                                <Img src={`https://img.youtube.com/vi/${video.link}/0.jpg`} onClick={handleClickVideo} value={video.link}/>

                            </div>
                            <p className={styles.videoTitle}>Green Book Official Trailer</p>

                        </div>
                    )
                })
            }
        </div>

    </>                
)
}

Answer 1

您正在 VideoModal 中调用 handleClickVideo，但 VideoModal 没有任何值，因此它将在回调中未定义

    <VideoModal 
        videoOpen={videoOpen}
        setVideoClose={handleClickVideo}
    />

您可以使回调函数接受一个值:

const handleClickVideo = (video) => {
    console.log(video)
}

然后更新你的渲染函数:

<VideoModal 
    videoOpen={videoOpen}
    setVideoClose={() => handleClickVideo(0)}
/>

<Img
    src={`https://img.youtube.com/vi/${video.link}/0.jpg`}
    onClick={()=>handleClickVideo(video.link)}
/>