为Material-UI的DropzoneArea预览图片添加onClick事件

DropzoneArea组件本身并没有提供直接给预览图片绑定onClick事件的属性，但可以通过以下两种方式实现你的需求：

方法一：自定义预览组件（推荐） #

利用组件的previewComponent属性，替换默认的预览模板，在自定义组件中添加点击事件逻辑。

步骤1：定义自定义预览组件 #

const CustomImagePreview = ({ file, removeFile }) => {
  // 点击预览图时打开模态框的逻辑
  const handlePreviewClick = () => {
    // 示例：假设你有状态变量控制模态框显示和图片URL
    setSelectedImageUrl(file.preview);
    setModalOpen(true);
  };

  return (
    <div 
      onClick={handlePreviewClick} 
      style={{ cursor: 'pointer', margin: '8px', textAlign: 'center' }}
    >
      {/* 预览图片 */}
      <img 
        src={file.preview} 
        alt="预览图" 
        style={{ maxWidth: '120px', maxHeight: '120px', objectFit: 'cover' }}
      />
      {/* 保留删除按钮，注意阻止事件冒泡 */}
      <button 
        onClick={(e) => {
          e.stopPropagation();
          removeFile(file);
        }}
        style={{ marginTop: '8px' }}
      >
        删除
      </button>
    </div>
  );
};

步骤2：在DropzoneArea中使用自定义组件 #

修改你原有的组件代码，添加previewComponent属性：

<DropzoneArea
  acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}
  clearOnUnmount
  dropzoneClass={classes.imageArea}
  dropzoneText="Imagem"
  filesLimit={1}
  getFileAddedMessage={(fileName) => {
    return `Arquivo ${fileName} anexado.`;
  }}
  getDropRejectMessage={(rejectedFile) => {
    return `Este formato de arquivo ${rejectedFile.type} não é permitido.`;
  }}
  getFileRemovedMessage={(fileName) => {
    return `Arquivo ${fileName} removido.`;
  }}
  id="drop"
  initialFiles={[storageUrl + factura.Ficheiro]}
  maxFileSize={5000000}
  onChange={(files) => handleFileUpload(files)}
  showPreviewsInDropzone={true}
  previewGridProps={{
    container: {
      spacing: 1,
      direction: 'row',
      justify: 'center'
    }
  }}
  // 添加自定义预览组件
  previewComponent={CustomImagePreview}
/>

方法二：通过DOM事件委托绑定点击 #

如果不想替换默认预览组件，可以利用事件委托，给DropzoneArea容器绑定点击事件，识别点击的是预览图后触发逻辑。

代码示例 #

import { useEffect, useRef } from 'react';

// 在你的组件内部
const dropzoneRef = useRef(null);

useEffect(() => {
  const handleClick = (e) => {
    // 匹配预览图片的DOM元素（类名基于DropzoneArea默认结构）
    const previewImg = e.target.closest('.MuiDropzoneArea-preview img');
    if (previewImg) {
      // 获取图片URL并打开模态框
      const imageUrl = previewImg.src;
      setSelectedImageUrl(imageUrl);
      setModalOpen(true);
    }
  };

  const dropzoneElement = dropzoneRef.current;
  if (dropzoneElement) {
    dropzoneElement.addEventListener('click', handleClick);
    // 组件卸载时移除监听
    return () => dropzoneElement.removeEventListener('click', handleClick);
  }
}, []);

// 给DropzoneArea添加ref
<DropzoneArea
  // 你的原有属性...
  ref={dropzoneRef}
/>

两种方法对比：

• 自定义预览组件：完全可控，可灵活修改预览样式和交互逻辑，适配性更强。
• 事件委托：无需修改原有组件结构，但依赖组件的DOM类名，若组件版本更新可能需要调整选择器。

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