在 React 中通过拖放创建受控输入

Question

我正在尝试创建一个组件来上传单张图片，显示其预览和删除选项。此外，能够从后端 base64 编码 URL 上传到字段 value 对我来说很重要。这就是我现在所拥有的。我将 value 从应用程序状态传递到组件道具，我已经实现了 onChange 处理程序，因此它将 URL 写入状态并且 deleteImage 只是删除 URL 来自州。

const ImageInput = ({ value, onChange, deleteImage }) => (
    <div>
        <input type="file" accept="image/*" onChange={onChange}/>
        { value &&
        (<div>
           <img src={value} alt="" width="50"/>
           <span onClick={deleteImage}>&#10060;</span>
         </div>)
        }
    </div>
);

但现在我想用拖放区替换通常的输入，并寻找最简单的方法来做到这一点。如有任何帮助，我将不胜感激。

已更新。 我选择使用库 react-dnd，但我不完全了解如何在此处使用它。所以我必须先做类似的事情？

import {DndProvider} from "react-dnd";
import {HTML5Backend} from "react-dnd-html5-backend";

const ImageInput = ({ value, onChange, deleteImage }) => (
    <div>
        <DndProvider backend={HTML5Backend}>
           <myDropTarget/>
        </DndProvider>
        { value &&
        (<div>
           <img src={value} alt="" width="50"/>
           <span onClick={deleteImage}>&#10060;</span>
         </div>)
        }
    </div>
);

然后就创建这样一个组件。

import React from "react";
import { useDrop } from 'react-dnd'


export function myDropTarget(props) {
    const [collectedProps, drop] = useDrop({
        accept
    })

    return <div ref={drop}>Drop Target</div>
}

但这对我不起作用。我得到一个错误：React Hook "useDrop" is called in function "myDropTarget" which is neither a React function component or a custom React Hook function

Answer 1

您可以使用 react-uploady 轻松完成此操作：

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";
import UploadPreview from "@rpldy/upload-preview";

const firstFileOnlyFilter = (file, index) => index === 0;

export default function App() {
  return (
    <Uploady
      destination={{ url: "[upload-url]" }}
      fileFilter={firstFileOnlyFilter}
    >            
        <DropZone>Drag file here</DropZone>
        <br />
        <UploadPreview />
    </Uploady>
  );
}

您可以在此 sandbox 中看到一个工作示例。

在 React 中通过拖放创建受控输入

Create controlled input with drag&drop in react

html

javascript

drag-and-drop

file-upload

reactjs