时间戳

首页 > 解决方案 > 是否可以在所有内容之上实现全屏 react-dropzone，同时能够单击其下的元素？

reactjs - 是否可以在所有内容之上实现全屏 react-dropzone，同时能够单击其下的元素？

问题描述

不确定这是否可能。很难理解冒泡是如何工作的。

标签： reactjsreact-dropzone

解决方案

是的，这是可能的。

使用 CSS 调整字段的高度和大小，例如，将heightand设置width为 dropzone 容器的 100%：

拖放区

import React, { Fragment } from "react";
import DropZone from "react-dropzone";
import { MdCloudUpload } from "react-icons/md";
import RenderImagePreview from "./renderImagePreview";

export default ({
  handleOnDrop,
  input,
  imagefile,
  meta: { error, touched }
}) => (
  <div>
    <DropZone
      accept="image/jpeg, image/png, image/gif, image/bmp"
      className="upload-container"
      onDrop={handleOnDrop}
      onChange={file => input.onChange(file)}
    >
      <div className="dropzone-container">
        <div className="dropzone-area">
          {imagefile && imagefile.length > 0 ? (
            <RenderImagePreview imagefile={imagefile} />
          ) : (
            <Fragment>
              <MdCloudUpload style={{ fontSize: 100, marginBottom: 0 }} />
              <p>Click or drag image file to this area to upload.</p>
            </Fragment>
          )}
        </div>
      </div>
    </DropZone>
    {touched && error && <div style={{ color: "red" }}>{error}</div>}
  </div>
);

风格

.dropzone-container {
  text-align: center;
  background-color: #efebeb;
  height: 100%;
  width: 100%;
}

.dropzone-area {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.upload-container {
  height: 100vh;
  width: 100%;
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
}

p {
  margin-top: 0;
}

推荐阅读