В настоящее время настройка FullCalendar с использованием ReactJS. Я могу заполнить свой календарь и события, но у меня возникли проблемы с 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>

Итак, здесь я получаю модальное окно, которое появляется и исчезает, когда я нажимаю кнопку события / закрытия, но я не могу передать данные из события, по которому он щелкнул. Надеюсь, что кому-то поможет. Кажется, я не могу заставить его это сделать.

1
user7376524 23 Май 2019 в 13:01

2 ответа

Лучший ответ

Ваш вопрос гласит: «Итак, здесь я вижу, что модал появляется и исчезает, когда я нажимаю на кнопку события / закрытия ...», но в комментариях вы заявляете «но я просто не могу понять, что написать для его рендеринга».

Я собираюсь предположить, что модал рендерится, и проблема в том, что вы не знаете, как использовать обратный вызов eventClick.

ADyson был в курсе о проблеме, которую вы имеете. Вы уже настроили обратный вызов, FullCalendar считает вашу функцию переключения вызываемой функцией, когда она вызывает щелчок события . Когда вызывается ваша функция переключения, ей передается объект eventClickInfo, который дает вам доступ к событию, элементу HTML, jsEvent и представлению.

Таким образом, изменение вашего переключателя на это даст вам доступ к событию:

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

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

* Я бы изменил название на handleEventClick или eventClick.

Обновление 1 . На основании приведенных выше комментариев я взял песочницу с кодом и обновил его. Я изменил следующее:

  1. Переместил модал в функцию рендеринга, чтобы он отображался, а затем обновлялся из состояния.
  2. Добавлено событие в объект состояния, поэтому при нажатии на событие оно обновляется. Это то, что отображается в диалоге.
  3. Класс изменен на className в div с календарем идентификаторов, поскольку это стандартно в React, поскольку класс является ключевым словом в 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>
        );
      }
    }
    
0
Ally Murray 24 Май 2019 в 15:31

На вашей кнопке (styled-компоненты),

<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 }))
}
0
Sarath Antony 24 Май 2019 в 10:22