React 如何识别点击项？

Question

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;

这是我在构建 netflix-clone 应用程序时创建的一个组件。我想点击一张电影海报，然后抓取该电影的 json 个对象。因此我使用了 onClick 属性并放置了 {() => handleClick(movie)} 这段代码。它实际上传递了我正在单击的电影对象。但我无法弄清楚它是如何发生的。当我点击海报时它是否再次执行地图功能。或者它是如何识别那部电影的？

Answer 1

map 函数循环遍历每个电影对象，并使用您在其中编写的 JXS 代码将其显示为 DOM 中的图像。每个图像都有一个它正在显示的电影对象。因此，当您单击它时，console.log(movie) 显示该图像中的 {() => handleClick(movie)} 传递的电影对象。

Answer 2

map 函数是接受函数类型依赖的函数

当您在列表上调用 map 函数时，对于该列表的每个项目，map 函数运行是您传递给其依赖项的函数，并且它还会提供该列表项的信息，只要它运行s 传递的函数

例如

这里有一个颜色列表

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

现在我们要在该列表上调用 map 函数

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

我们将得到四个包含列表项字符串的 divs，就像这样

red

green

blue

yellow

所以我们定义了每当你运行传递函数时，return 一个 div 包含列表 colors

现在我们可以定义每当该函数被调用时 return 一个 div 每当用户点击它时，它都会显示一个包含 div[=19 颜色的警告=]

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

在此处阅读有关地图功能的更多信息https://www.w3schools.com/jsref/jsref_map.asp

React 如何识别点击项？

How React recognize clicking items?

javascript

components

onclick

reactjs