React 如何识别点击项目？答案

【问题标题】：How React recognize clicking items?React 如何识别点击项目？
【发布时间】：2021-07-17 07:47:27
【问题描述】：

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)} 这个代码和平。它实际上传递了我单击的电影对象。但我无法弄清楚它是如何发生的。当我点击海报时，它会再次执行地图功能吗？或者它是如何识别那部电影的？

【问题讨论】：

见developer.mozilla.org/en-US/docs/Web/API/Element/click_event和reactjs.org/docs/events.html

标签： javascript reactjs onclick components

【解决方案1】：

map 函数是一个函数类型依赖的函数

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

例如

这里有一个颜色列表

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

所以我们定义每当你运行传递的函数时，返回一个包含列表颜色的 div

现在我们可以定义每当调用该函数时返回一个 div，当用户点击它时，它会显示一个包含该 div 颜色的警报

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了解更多关于地图功能的信息

【讨论】：

【解决方案2】：

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

【讨论】：