React 如何识别点击项目？

Posted 2023-02-23

【中文标题】React 如何识别点击项目？

【英文标题】：How React recognize clicking items?

【发布时间】：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

【参考方案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) 传递的电影对象。