你的问题是“所以当我点击事件/关闭按钮时，我会看到模态出现和消失......”但在评论中你说“但我不知道要写什么来渲染它”。

我将假设正在呈现 Modal，问题是您不确定如何使用 eventClick 回调。

Adyson 及时了解您遇到的问题。您已经设置了回调，FullCalendar 将您的切换函数视为触发事件 click时要调用的函数。当您的切换函数被调用时，它将传递一个 eventClickInfo 对象，该对象使您可以访问事件、HTML 元素、jsEvent 和视图。

因此，将您的切换更改为此将使您可以访问该事件：

toggle(eventClickInfo) {
  console.log(eventClickInfo);

  this.setState(prevState => ({
    modal: !prevState.modal
  }));
}

*我会将名称更改为 handleEventClick 或 eventClick。

更新 1： 根据上面的评论，我采用了您的代码沙箱并进行了更新。我更改了以下内容：

1. 将模态移动到渲染函数中，以便它被渲染然后从状态更新。
2. 将事件添加到状态对象，因此当您单击事件时，它会更新。这就是在对话框中呈现的内容。

3. 在带有 id 日历的 div 上将 class 更改为 className 因为这是 React 中的标准，因为 class 是 JS 中的关键字。

   class Calendar extends React.Component {
     state = {
       modal: false,
       event: {
         title: "",
         start: new Date()
       }
     };
   
     toggle = () => {
       this.setState({ modal: !this.state.modal });
     };
   
     handleEventClick = ({ event, el }) => {
       this.toggle();
       this.setState({ event });
     };
   
     render() {
       return (
         <div id="calendar" className="container" ref="calendar">
           <FullCalendar
             header={{
               left: "prev,next today",
               center: "title",
               right: "dayGridMonth, listWeek"
             }}
             selectable={true}
             plugins={[interaction, dayListPlugin, dayGridPlugin, bootstrapPlugin]}
             themeSystem="bootstrap"
             weekends={false}
             displayEventTime={true}
             timeZone="UTC"
             events={[
               { title: "event 1", date: "2019-05-01" },
               { title: "event 2", date: "2019-05-02" }
             ]}
             eventRender={this.handleEventRender}
             eventClick={this.handleEventClick}
           />
           <Modal
             isOpen={this.state.modal}
             toggle={this.toggle}
             className={this.props.className}
           >
             <ModalHeader toggle={this.toggle}>
               {this.state.event.title}
             </ModalHeader>
             <ModalBody>
               <div>
                 <p>{this.state.event.start.toISOString()}</p>
               </div>
             </ModalBody>
             <ModalFooter>
               <Button color="primary">Do Something</Button>{" "}
               <Button color="secondary" onClick={this.toggle}>
                 Cancel
               </Button>
             </ModalFooter>
           </Modal>
         </div>
       );
     }
   }
   

在您的按钮（样式组件）上，

<Button type="button" color="primary" onClick={e => toggle(e)}>Toggle Button</Button>

也在你的 handleToggle()

toggle = event => {
 // event.preventDefault() or manipulate something with the @param
 this.setState(prevState => ({ modal: !prevState.modal }))
}