react-big-calendar:如何使用onSelectEvent创建一个弹出窗口

Question

<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>
}

问题:

模态不会显示，它确实显示在控制台日志，但后来我试图把它放在一个模态，它只是不渲染。我已经尝试过反应响应模式和其他引导模式，但它只是不渲染。

Answer 1

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;
}