reactjs - react-big-calendar:如何使用 onSelectEvent 制作弹出窗口
问题描述
<DragAndDropCalendar
selectable
localizer={localizer}
events={events}
style={{ height: 1550 }}
onSelectSlot={(e) => handleSelect(e)}
onSelectEvent={(e) => handleSelectedEvent(e)}
/>
这是功能:
function handleSelectedEvent (e) {
<div className="modal">
{console.log(e)}
</div>
}
问题:
模态不会显示,它确实显示在控制台日志中,但后来我尝试将它放入模态,它只是不呈现。我已经尝试过 react-responsive-modal 以及其他引导模式,但它只是不渲染。
解决方案
import React, { useState} from 'react'
function Calendar() {
const [selectedEvent, setSelectedEvent] = useState(undefined)
const [modalState, setModalState] = useState(false)
const handleSelectedEvent = (event) => {
setSelectedEvent(event)
setModalState(true)
}
const Modal = () => {
return (
<div className={`modal-${modalState == true ? 'show' : 'hide'}`}>
// Here you define your modal, what you want it to contain.
// Event title for example will be accessible via 'selectedEvent.title'
</div>
)
}
return (
<div>
{selectedEvent && <Modal />}
<Calendar
selectable
localizer={localizer}
events={events}
style={{ height: 1550 }}
onSelectSlot={(e) => handleSelect(e)}
onSelectEvent={(e) => handleSelectedEvent(e)}
/>
</div>
)
}
然后,在 css 中,你必须这样做:
.modal-show {
display: block;
}
.modal-hide {
display: none;
}
推荐阅读
- python - 子类化窗口时如何在pyglet中安排回调
- git - Git:在本地删除远程分支后删除它
- c++ - 如何在 Windows 10 上为 Qt 正确设置 OpenSSL?
- r - 如何在R中将数据转换为事务格式
- shopify - 如何在 Shopify 中获取唯一变体 option2 值
- r - 尝试在 R 4.0 中下载 zip 文件,适用于 windows、linux 但不适用于 MacOS...“HTTP 状态为 '400 Bad Request”
- jquery - 样式化 jQuery 数据表搜索面板
- javascript - Laravel Vue spa 获取当前身份验证用户详细信息
- android - Android中使用kivy的前台服务
- html - 如何一次只允许打开一个垫子扩展面板?