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