Как заполнить модал по событию клик?

Question

В настоящее время настраиваем 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>

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

Answer 1

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

Я собираюсь предположить, что модал рендерится, и проблема в том, что вы не знаете, как использовать обратный вызов 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>
       );
     }
   }
   

Answer 2

На вашей кнопке (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 }))
}