javascript - 反应 Dropzone 以在 drop 上应用 css
问题描述
我正在与 Dropzone 做出反应。我的要求是当我们将文件拖动到放置区域时,我确实需要在中心显示 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 事件处理程序以在悬停时呈现文本。
推荐阅读
- node.js - 如何在nodejs中集成payoneer
- c# - 我的统一预制件在一个接一个生成时没有运行脚本(使用 XR 控制器)
- c# - Microsoft Json 规则引擎自定义错误消息
- ios - Swift Detect UISlider 图像点击
- react-native - 在 React Native 中压缩图像/视频
- linux - GIT push 命令什么都不做 - 命令在 1 秒内完成
- c# - 实现这一点的最佳方法?
- angularjs - 角度材料表合并表中第一行的列
- amazon-web-services - 脚本从 Auto Scaling 组中获取实例,然后获取该实例的主机名
- android - 如何在 Kotlin Flow 中添加动态值