多个放置目标 react-dropzone答案

【问题标题】：Multiple drop targets react-dropzone多个放置目标 react-dropzone
【发布时间】：2020-07-27 10:30:23
【问题描述】：

基本上我想在一个dropzone中有多个<input/>。

它看起来像那样。
所有放置目标在进入父面板时都应启用其isDragActive。

react-dropzone 完全可以吗？

【问题讨论】：

【解决方案1】：

只需将更多 <input's /> 作为孩子传递给 Dropzone，例如：

<Dropzone
  onDrop={(onDropProps) =>
    console.log("onDropProps in onDrop event handler", onDropProps)
  }
  accept='image/jpg,image/jpeg,image/png'
  multiple={true}
>
  {({ getRootProps, getInputProps, isDragActive }) => {
    console.log("getRootProps", getRootProps());
    console.log("getInputProps", getInputProps());
    console.log("isDragActive", isDragActive);
    return (
      <div>
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {<p className='fileDrop'>Try dropping one or more files here</p>}
        </div>

        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {<p className='fileDrop'>Try dropping one or more files here</p>}
        </div>

        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {<p className='fileDrop'>Try dropping one or more files here</p>}
        </div>
      </div>
    );
  }}
</Dropzone>

我在可折叠的桌子上使用 Dropzone，所以当我折叠一行时，我可以访问所有三个道具，例如

【讨论】：

这不允许内部放置目标在进入其父级时激活，并且当我将根道具放在父级 div 上时，它变成了放置（并单击）目标。