多个掉落目标反应-下降区

Question

基本上，我想在一个拖放区中包含多个<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，所以当我折叠一行时，我将可以访问所有三个道具，例如