如何从 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在您的回调中

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

/>