如何在事件点击时填充模态？

Question

目前正在使用 ReactJS 设置 FullCalendar。我可以填充我的日历和事件，但在使用 eventClick={} 时遇到问题。如何使用 eventClick={} 填充模式并检索事件信息？

我已经设法让模式在单击事件时出现，但我似乎无法传递任何数据<这是我得到的最接近的。我想过也许可以在模态触发的地方增加一个功能，但我无法弄清楚如何让它显示出来。

当前代码

constructor() {
        super();
        this.state = {
            modal: false
        };

        this.toggle = this.toggle.bind(this);
    };

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

----
  //I then render the calendar and modal inside the div.

<div id="calendar" class="container" ref="calendar">
                <FullCalendar
                    header={{
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth, listWeek'
                    }}
                    selectable={true}
                    height={650}
                    aspectRatio={2}
                    plugins={[interaction, dayListPlugin, dayGridPlugin, bootstrapPlugin]}
                    themeSystem="bootstrap"
                    weekends={false}
                    displayEventTime={true}
                    timeZone="UTC"
                    events={jsonFeed}
                    eventRender={this.handleEventRender}
                    eventClick={this.toggle}
                />
            <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
            <ModalHeader toggle={this.toggle}>testTitle</ModalHeader>
            <ModalBody>test body</ModalBody>
            <ModalFooter>
                <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
                <Button color="secondary" onClick={this.toggle}>Cancel</Button>
            </ModalFooter>
        </Modal>
            </div>

所以在这里，当我点击 event/close 按钮时，模态出现和消失，但我无法传递点击它的事件的数据。我希望有人能提供帮助。我似乎无法做到这一点。

Answer 1

您的问题是 "So here I get the modal appearing and disappearing when I click on the event/close button..."，但在评论中您是 "but I just can't figure what to write to render it"。

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

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

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

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

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

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

更新 1： 根据以上评论，我已经采纳了您的 code sandbox 并进行了更新。我更改了以下内容：

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

将 class 更改为 class div 上的名称，带有 id 日历，因为这是 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>
    );
  }
}

Answer 2

在你的按钮上（styled-components），

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

如何在事件点击时填充模态？

How to populate modal on event click?

javascript

reactjs

fullcalendar

fullcalendar-4