如何在事件点击时填充模态? [英] How to populate modal on event click?

问题描述

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

Currently setting up FullCalendar using ReactJS. I can populate my calendar and the events but having trouble with the eventClick={}. How can I populate a modal using eventClick={} and retrieve event information?

我设法使该模式在单击事件时出现，但我似乎无法通过<传递任何数据.这是我最接近的. 我想到了可能会激发模态触发的功能，但我无法弄清楚如何使其显示出来.

I have managed to get the modal to appear when the event is clicked on but I cannot seem to pass any data through < this is the closest I got. I thought of perhaps greating a function where the modal fires off but I cant work out how to make it show.

当前代码

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>

所以在这里，当我单击事件/关闭按钮时，模态会出现和消失，但是我无法通过单击事件传递事件中的数据.我希望有人能提供帮助.我似乎无法做到这一点.

So here I get the modal appearing and disappearing when I click on the event/close button but I cannot pass the data from the event clicked through it. I hope that someone can help. I cant seem to get it to do it.

推荐答案

您的问题指出因此，当我单击事件/关闭按钮时，在这里我会看到模态的出现和消失..."，但在注释中却说但我只是不知道该写些什么来呈现它."

Your question states "So here I get the modal appearing and disappearing when I click on the event/close button..." but in the comments you state "but I just can't figure what to write to render it".

我将假定正在渲染Modal，而问题是您不确定如何使用eventClick回调.

I am going to assume the Modal is being rendered and that the issue is you are unsure how to use the eventClick callback.

ADyson就您遇到的问题进行了现场采访.您已经设置了回调，FullCalendar认为您的切换功能是触发事件点击.调用您的切换函数时，将传递一个eventClickInfo对象，该对象使您可以访问事件，HTML元素，jsEvent和视图.

ADyson was spot on about the issue you are having. You have already set up the callback, FullCalendar considers your toggle function the function to call when it triggers the event click. When your toggle function is called it will be passed an eventClickInfo object that gives you access to the event, HTML element, jsEvent and the view.

因此，将切换开关更改为此选项将使您可以访问事件:

So changing your toggle to this would give you access to the event:

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

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

*我将名称更改为handleEventClick或eventClick.

*I would change the name to handleEventClick or eventClick.

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

Update 1: Based on the comments above I have taken your code sandbox and updated. I changed the following:

1. 将模态移动到render函数中，以便对其进行渲染，然后从状态进行更新.
2. 已将事件添加到状态对象，因此单击事件时将对其进行更新.这就是对话框中呈现的内容.

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

1. Moved the modal into the render function so that it's rendered then updated from the state.
2. Added the event to the state object so when you click the event this is updated. This is then what is rendered in the dialog.

3. Changed class to className on the div with the id calendar since this is standard in React due to class being a keyword in 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>
    );
  }
}

这篇关于如何在事件点击时填充模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！