Как заполнить модал по событию клик? - PullRequest
Новая
       5

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

1 голос
/ 23 мая 2019

В настоящее время настраивает FullCalendar с помощью ReactJS. Я могу заполнить свой календарь и события, но у меня возникли проблемы с eventClick={}. Как я могу заполнить модальные с помощью eventClick={} и получить информацию о событии?

Мне удалось заставить модал появляться при нажатии на событие, но я не могу передать какие-либо данные через <это самое близкое, что я получил. Я подумал о том, чтобы создать функцию, где модал срабатывает, но я не могу понять, как заставить его показывать. </p>

Текущий код 

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>

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

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

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

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

также на вашей ручкеToggle () 

toggle = event => {
 // event.preventDefault() or manipulate something with the @param
 this.setState(prevState => ({ modal: !prevState.modal }))
}
0 голосов
/ 24 мая 2019

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

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