Javascript 如何识别单击的项目？ import React，{useState，useffect}来自“React”； 导入“/Row.css”； 从“react YouTube”导入YouTube； 从“电影预告片”导入movieTrailer； 功能行（道具）{ 常数imgbaeurl=http://image.tmdb.org/t/p/original/'; const fetchBaseURL='1〕https://api.themoviedb.org/3'; const[movies，setMovies]=useState（[]）； const[videoURL，setVideoURL]=useState（“”）； useffect（异步（）=>{ const response=wait fetch（`fetchBaseURL}${props.fetchURL}`）； const data=wait response.json（）； setMovies（data.results）； 返回数据； }，[props.fetchURL]）； const handleClick=（电影）=>{ console.log（电影）； }; 返回( {props.title} {movies.map（（movie）=>{ 返回( ) }) } ); } 导出默认行；

这是我在构建netflix克隆应用程序时创建的一个组件。我想点击一张电影海报，然后抓取那部电影的json对象。因此，我使用了

onClick

属性，并将

{（）=>handleClick（movie）}

这段代码的和平。它实际上传递了我正在单击的电影对象。但我不知道这是怎么发生的。当我点击海报时，它是否再次执行地图功能。或者它是如何识别该电影的？

映射函数循环遍历每个电影对象，并使用您在其中编写的JXS代码在DOM中将其显示为图像。每个图像都有一个正在显示的电影对象。因此，当您单击它时，

console.log（movie）

显示通过该图像中的

{（）=>handleClick（movie）}

传递的movie对象。

映射函数是具有函数类型依赖关系的函数

当您在列表上调用map函数时，对于该列表的每一项，map函数都会运行传递给其依赖项的函数，并在运行传递的函数时提供该列表项的信息

比如说

这里我们有一个颜色列表

import React, {useState, useEffect} from 'react';
import './Row.css';
import YouTube from 'react-youtube';
import movieTrailer from 'movie-trailer';

function Row(props){
    const imgBaseURL = 'http://image.tmdb.org/t/p/original/';
    const fetchBaseURL = 'https://api.themoviedb.org/3';
    
    const [movies, setMovies] = useState([]);
    const [videoURL, setVideoURL] = useState('');

    useEffect(async () => {
        const response = await fetch(`${fetchBaseURL}${props.fetchURL}`);
        const data = await response.json();
        setMovies(data.results);
        return data;
    }, [props.fetchURL]);

    const handleClick = (movie) => {
        console.log(movie);
    };

    return (
        <div>
           <h3 className="movie-header">{props.title}</h3>
           <div className="row_posters">
            {movies.map((movie) => {
                return (
                    <img 
                        onClick={() => handleClick(movie)} 
                        key={movie.id} 
                        className="row_poster" 
                        src={`${imgBaseURL}${props.isLargeRow? movie.poster_path: movie.backdrop_path}`}
                    />
                )
             })  
            }
           </div>
        </div>
    );
}

export default Row;

现在我们要在该列表上校准map函数

const colors = ["red","green","blue","yellow"];

在此处阅读有关地图功能的更多信息

请参见和

colors.map(
  //here we would pass the function
  (color)=>{
     return <div>{color}</div>;
  }
)

colors.map(
  //here we would pass the function
  (color)=>{
     return <div onClick={()=>{alert(color)}}>click me to see my color}</div>;
  }
)