react-big-calendar:如何使用 onSelectEvent 弹出窗口
react-big-calendar: How make a popup with 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 和其他 bootstrap 模态,但它就是不渲染。
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;
}
<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 和其他 bootstrap 模态,但它就是不渲染。
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;
}