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中看到一个有效的示例。

通过拖放反应来创建受控输入

1 个答案: