如何从 React Img 组件获取值

Question

我总是从“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>

    </>                

)

}

Answer 1

您正在拨打handleClickVideo电话VideoModal，但VideoModal没有任何value，因此它将出现undefined在您的回调中&nbsp; &nbsp; <VideoModal&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; videoOpen={videoOpen}&nbsp; &nbsp; &nbsp; &nbsp; setVideoClose={handleClickVideo}&nbsp; &nbsp; />您可以使回调函数接受一个值：const handleClickVideo = (video) => {&nbsp; &nbsp; console.log(video)}然后更新你的渲染函数：<VideoModal&nbsp;&nbsp; &nbsp; videoOpen={videoOpen}&nbsp; &nbsp; setVideoClose={() => handleClickVideo(0)}/><Img&nbsp; &nbsp; src={`https://img.youtube.com/vi/${video.link}/0.jpg`}&nbsp; &nbsp; onClick={()=>handleClickVideo(video.link)}/>