在React中的粘贴/拖放事件中接收图像文件

import React, { useRef } from 'react';

const MyComponent = () => {
  const containerRef = useRef(null);

  const handlePaste = (event) => {
    // 处理粘贴事件
    const items = event.clipboardData.items;
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.type.indexOf('image') !== -1) {
        const file = item.getAsFile();
        // 处理图像文件
        console.log(file);
      }
    }
  };

  const handleDrop = (event) => {
    // 阻止浏览器默认行为
    event.preventDefault();

    // 处理拖放事件
    const files = event.dataTransfer.files;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      // 处理图像文件
      console.log(file);
    }
  };

  const handleDragOver = (event) => {
    // 阻止浏览器默认行为
    event.preventDefault();
  };

  return (
    <div
      ref={containerRef}
      onPaste={handlePaste}
      onDrop={handleDrop}
      onDragOver={handleDragOver}
    >
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;