Reactjs 有没有可能在所有东西的顶部实现一个全屏的react dropzone,同时能够单击它下面的元素?
不确定这是否可行。很难理解气泡是如何工作的。是的,这是可能的 使用CSS调整字段的高度和大小,例如,将Reactjs 有没有可能在所有东西的顶部实现一个全屏的react dropzone,同时能够单击它下面的元素?,reactjs,react-dropzone,Reactjs,React Dropzone,不确定这是否可行。很难理解气泡是如何工作的。是的,这是可能的 使用CSS调整字段的高度和大小,例如,将高度和宽度设置为dropzone容器的100%: Dropzone import React, { Fragment } from "react"; import DropZone from "react-dropzone"; import { MdCloudUpload } from "react-icons/md"; import
高度
和宽度
设置为dropzone容器的100%:
Dropzone
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>
);
简言之,它与控件继承有关,而不一定是“层”。感谢Pranav,我犯的错误是没有将我希望作为
DropZone
的子对象可以单击的内容放在一起。
.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;
}