多个拖放目标react-dropzone

Question

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

​

​

它看起来就像这样。

当进入父面板时，所有的拖放目标都应该启用它们的isDragActive。

使用react-dropzone可以做到这一点吗？

Answer 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，所以当我折叠一行时，我可以访问所有三个属性，比如

​

​