首页 > 解决方案 > 如何使用 react-dropzone 处理 2 个区域

问题描述

我需要在一个组件中使用 2 个不同的 dropzones 来存储 2 个不同的文件和 useDropeZone 版本。我正在尝试使用 onDropAccepted 并使用输入 id 检索事件......但 id 永远不会改变。

我有 2 个这样的 dropezone:

<div {...getRootProps({style})}>
<input id={'new_logo_input'} {...getInputProps()} />
<p>Drop logo (jpg,png)</p>
</div>
<div {...getRootProps({style})}>

<input id={'new_stamp_input'} {...getInputProps()} />
<p>Drop stamp (jpg,png)</p>
</div>

和 useDropeZone 一样:

const { fileRejections, getRootProps, getInputProps, isDragActive, isDragReject, isDragAccept} = useDropzone({
onDropAccepted: (files,event)=>{
console.log(files,event.target.id )
}
})

但是 event.target.id 总是返回'new_stamp_inout'.....!!!

任何人都可以帮助我吗?

非常感谢

标签: reactjsdropzonereact-dropzone

解决方案


推荐阅读