在反应中使用拖放创建受控输入

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 中看到一个工作示例。