在react中用拖放创建受控输入

Question

我试图创建一个组件上传一个单一的图像，显示其预览和删除选项。此外，能够从后端base64编码的URL上传到字段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>
);

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

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”是在函数“mydroptarget”中调用的，该函数既不是React函数组件，也不是自定义React Hook函数

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>
  );
}