如何在React.js中实现点击图片底部预览功能？

要实现点击图片后在preview-title下方显示预览效果，你可以按照以下步骤修改代码：

1. 添加状态管理 #

首先在组件顶部引入useState钩子，用来存储当前选中的图片地址：

import { useState } from 'react';

// 在组件内部初始化状态
const [selectedImage, setSelectedImage] = useState(null);

2. 编写点击事件处理函数 #

创建一个处理图片点击的函数，把点击的图片地址存入状态：

const handleImageClick = (e) => {
  // 阻止事件冒泡，避免触发父元素的handleClick
  e.stopPropagation();
  // 获取当前点击图片的src属性
  setSelectedImage(e.target.src);
};

3. 绑定点击事件到所有图片 #

给每个<img>标签添加onClick={handleImageClick}属性，确保所有图片都能触发预览。

4. 添加预览区域 #

在preview-title的div下方，添加用于显示预览图片的元素，根据selectedImage的状态来渲染：

<div className='preview-title'>
  <h5> PREVİEW</h5>
  {/* 预览图片区域 */}
  {selectedImage && (
    <div className='preview-image-container'>
      <img src={selectedImage} alt="预览图" style={{ maxWidth: '100%', height: 'auto' }} />
    </div>
  )}
</div>

完整修改后的代码 #

import { useState } from 'react';

const YourComponent = () => {
  const [selectedImage, setSelectedImage] = useState(null);
  // 保留你原有的divRef、collection1/2/3、handleClick等变量

  const handleImageClick = (e) => {
    e.stopPropagation();
    setSelectedImage(e.target.src);
  };

  return (
    <React.Fragment>
      <div className={`step step-3`} ref={divRef}>
        <div className="atrium">
          <span>Paketler</span>
        </div>
        <div className="content">
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >
            <img className="imgg" src={collection1} alt="ss" onClick={handleImageClick} />
            <div className='price'>
              <span className='subPrice'> GOLD AİLE PAKETİ</span>
              <span >1.200 TL</span>
            </div>
          </div>
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >
            <img className="imgg" src={collection2} alt="ss" onClick={handleImageClick} />
            <div className='price'>
              <span className='subPrice'> GOLD AİLE PAKETİ</span>
              <span >1.200 TL</span>
            </div>
          </div>
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >
            <img className="imgg" src={collection3} alt="ss" onClick={handleImageClick} />
            <div className='price'>
              <span className='subPrice'> GOLD AİLE PAKETİ</span>
              <span>1.200 TL</span>
            </div>
          </div>

          <div className='preview-title'>
            <h5> PREVİEW</h5>
            {selectedImage && (
              <div className='preview-image-container'>
                <img src={selectedImage} alt="预览图" style={{ maxWidth: '100%', height: 'auto' }} />
              </div>
            )}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default YourComponent;

关键说明 #

• 使用useState跟踪当前选中的图片，这是React管理组件内部状态的标准方式。
• e.stopPropagation()阻止事件冒泡到父元素的handleClick，避免触发不必要的逻辑。
• 预览区域通过条件渲染{selectedImage && ...}实现，只有选中图片后才显示预览图。
• 可以给预览图添加自定义CSS类（比如preview-image-container）来调整样式，比如设置边框、圆角等优化显示效果。

内容的提问来源于stack exchange，提问作者babyFrontendDeveloper