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

问题：

模态不会显示，它会显示在控制台日志中，但后来我尝试将它放入模态，它只是不呈现。我已经尝试过 react-responsive-modal 以及其他引导模式，但它就是不渲染。

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