时间戳

首页 > 解决方案 > 如何从 React Img 组件中获取值

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

问题描述

我不断从'handleClickVideo'中的console.log得到未定义。如何从正确点击视频中获得价值？我也尝试使用 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>

    </>                
)
}

标签： javascripthtmlreactjs

解决方案

你正在打电话handleClickVideo但VideoModal没有VideoModal任何value，所以它会undefined在你的回调中

    <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)}
/>

推荐阅读