反应 Dropzone 在 drop 上应用 css

中年

我正在与 Dropzone 做出反应。我的要求是当我们将文件拖放到放置区域时，我确实需要在放置区域显示一个文本，例如在放置区域（文本：您正在插入文件）+放置区域中的蓝色边框

我的代码看起来像

  <Dropzone
    disableClick={true}
    className={styles.dropStyle}
    dropzoneActive={{ borderColor: 'green' }}
    onDrop={e => this.props.change(e)}
  >
    <div>...this is the dropzone area...</div>
   </DropZone>

这里边框颜色绿色没有出现，它只采用 dropStyle css+ 加上我只需要在我们将文件拖到区域区域时在 div 内显示文本。

我的意思是它是一个有很多资产的普通 div，当我们只删除 css 应该应用（意味着 dropzoneActive css 应该是可见的）

任何小提琴都会受到高度赞赏

马克西米利安·海德尔

你在使用 react-dropzone 吗？由于打字没有className和dropzoneActive道具，我想知道你是如何工作的。反正...

这是我用于 Dropzone 的一些代码

反应：

                  <Dropzone
                    onDrop={// do stuff here}
                    accept='image/jpg,image/jpeg,image/png'
                    multiple={true}
                  >
                    {({ getRootProps, getInputProps }) => {
                      return (
                        <div {...getRootProps()}>
                          <input {...getInputProps()} />
                          {
                            <p className='fileDrop'>
                              Try dropping one or more files here
                            </p>
                          }
                        </div>
                      );
                    }}
                  </Dropzone>

CSS：

.fileDrop {
  background: #f5f5f5;
  border: 1px dashed #c2c2c2;
  border-radius: 3px;
  text-align: center;
  padding: 36px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.fileDrop:hover {
  background: rgb(194, 243, 194);
  border: 1px dashed #333;
}

我看到有两种方法可以实现您的目标。第一个是使用 css 渲染一个隐藏类的 div，并在悬停时显示内容。

                 <Dropzone
                    onDrop={// do stuff here}
                    accept='image/jpg,image/jpeg,image/png'
                    multiple={true}
                  >
                    {({ getRootProps, getInputProps }) => {
                      return (
                        <div {...getRootProps()}>
                          <input {...getInputProps()} />
                          {
                            <p className='hidden-text'>
                              Try dropping one or more files here
                            </p>
                          }
                        </div>
                      );
                    }}
                  </Dropzone>

.hidden-text {
    display: none;
    border: 1px solid green;
}

.hidden-text:hover {
  display: block or whatever
  border: 1px solid blue;
}

第二是您编写自己的 javascript 事件处理程序来呈现悬停时的文本。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。