使用 React.js 中的 map() 函数实现点击图片放大功能-html教程-PHP中文网

使用 React.js 中的 map() 函数实现点击图片放大功能

花韻仙語

发布： 2025-08-14 17:02:21

原创

287人浏览过

使用 react.js 中的 map() 函数实现点击图片放大功能

本文旨在帮助开发者掌握如何在 React.js 中使用 map() 函数动态渲染图片列表，并实现点击特定图片进行放大的功能。通过示例代码，我们将演示如何传递索引，并在点击事件中获取该索引，从而定位并放大对应的图片。本文提供两种实现方案，帮助你更好地理解和应用该技术。

在 React.js 中，使用 map() 函数动态渲染图片列表是很常见的需求。而当需要实现点击特定图片进行放大显示的功能时，如何正确地获取被点击图片的索引就显得尤为重要。以下将介绍两种实现方案，并提供相应的代码示例和解释。

方案一：通过重新创建事件处理函数传递索引

这种方案的核心思想是在 map() 函数内部，为每个图片元素创建一个新的事件处理函数，并将当前图片的索引作为参数传递给该函数。

示例代码：

import React, { useState } from 'react';

const images = [
  { id: 1, title: "Nature 2", image: "image1.jpg" },
  { id: 2, title: "Nature 3", image: "image2.jpg" },
  { id: 3, title: "Nature 4", image: "image3.jpg" },
  { id: 4, title: "Animal 1", image: "image4.jpg" }
];

function ImageGrid() {
  const [selectedImageIndex, setSelectedImageIndex] = useState(null);

  const openCardView = (index) => {
    setSelectedImageIndex(index);
  };

  return (
    <div className="grid-container">
      {images.map((image, index) => (
        <button key={image.id} onClick={() => openCardView(index)}>
          <div className="grid-item">
            <h1 className="title-with-grid">{image.title}</h1>
            <img
              className="grid-item picture-img"
              src={image.image}
              alt={image.title}
            />
          </div>
        </button>
      ))}

      {selectedImageIndex !== null && (
        <div className="backdrop" onClick={() => setSelectedImageIndex(null)}>
          <div className="card-view">
            <img
              className="grid-item picture-img"
              src={images[selectedImageIndex].image}
              alt={images[selectedImageIndex].title}
            />
          </div>
        </div>
      )}
    </div>
  );
}

export default ImageGrid;

登录后复制

代码解释：

useState Hook 用于管理当前被选中的图片的索引 selectedImageIndex。
openCardView 函数接收一个 index 参数，并使用 setSelectedImageIndex 更新 selectedImageIndex 的状态。
在 map() 函数中，我们为每个 <button> 元素绑定一个 onClick 事件，该事件触发时调用 openCardView 函数，并将当前图片的 index 传递给它。
当 selectedImageIndex 不为 null 时，显示放大的图片。

优点：

逻辑清晰，易于理解。

缺点：

每次渲染都会创建新的函数，可能存在一定的性能损耗。

方案二：使用 data 属性传递索引

这种方案利用 HTML 元素的 data-* 属性来存储图片的索引，然后在事件处理函数中通过 event.currentTarget.dataset 来获取该属性值。

示例代码：

import React, { useState } from 'react';

const images = [
  { id: 1, title: "Nature 2", image: "image1.jpg" },
  { id: 2, title: "Nature 3", image: "image2.jpg" },
  { id: 3, title: "Nature 4", image: "image3.jpg" },
  { id: 4, title: "Animal 1", image: "image4.jpg" }
];

function ImageGrid() {
  const [selectedImageIndex, setSelectedImageIndex] = useState(null);

  const openCardView = (e) => {
    const index = parseInt(e.currentTarget.dataset.index, 10);
    setSelectedImageIndex(index);
  };

  return (
    <div className="grid-container">
      {images.map((image, index) => (
        <button key={image.id} onClick={openCardView} data-index={index}>
          <div className="grid-item">
            <h1 className="title-with-grid">{image.title}</h1>
            <img
              className="grid-item picture-img"
              src={image.image}
              alt={image.title}
            />
          </div>
        </button>
      ))}

      {selectedImageIndex !== null && (
        <div className="backdrop" onClick={() => setSelectedImageIndex(null)}>
          <div className="card-view">
            <img
              className="grid-item picture-img"
              src={images[selectedImageIndex].image}
              alt={images[selectedImageIndex].title}
            />
          </div>
        </div>
      )}
    </div>
  );
}

export default ImageGrid;

登录后复制

代码解释：

useState Hook 用于管理当前被选中的图片的索引 selectedImageIndex。
openCardView 函数接收一个事件对象 e，并通过 e.currentTarget.dataset.index 获取 data-index 属性的值，并将其转换为数字类型。
在 map() 函数中，我们为每个 <button> 元素添加一个 data-index 属性，其值为当前图片的 index。
当 selectedImageIndex 不为 null 时，显示放大的图片。

优点：