Как показать модал, когда мы нажимаем на него, используя reactjs? - PullRequest
Новая
       22

Как показать модал, когда мы нажимаем на него, используя reactjs?

0 голосов
/ 03 марта 2020

Я новичок в реакции и хотел создать календарь и хотел добавить событие к соответствующей дате в календаре, когда мы нажимаем на поле, оно должно показывать модальное всплывающее окно, но модальное не отображается. Здесь я использую только semanti c -ui-реагировать для разработки каждого компонента. Кто-нибудь может помочь мне решить эту проблему?

первый компонент: 

import React, { Component } from "react";
import { render } from "react-dom";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
import CreateEvent from "./CreteEvent";

const localizer = momentLocalizer(moment);

class ShowCalendar extends Component {
  constructor() {
    super();
    const now = new Date();
    const events = [
      {
        id: 0,
        title: "All Day Event very long title",
        allDay: true,
        start: new Date(2015, 3, 0),
        end: new Date(2015, 3, 1)
      },
      {
        id: 1,
        title: "Long Event",
        start: new Date(2015, 3, 7),
        end: new Date(2015, 3, 10)
      },

      {
        id: 2,
        title: "DTS STARTS",
        start: new Date(2016, 2, 13, 0, 0, 0),
        end: new Date(2016, 2, 20, 0, 0, 0)
      },

      {
        id: 3,
        title: "DTS ENDS",
        start: new Date(2016, 10, 6, 0, 0, 0),
        end: new Date(2016, 10, 13, 0, 0, 0)
      },

      {
        id: 4,
        title: "Some Event",
        start: new Date(2015, 3, 9, 0, 0, 0),
        end: new Date(2015, 3, 10, 0, 0, 0)
      },
      {
        id: 5,
        title: "Conference",
        start: new Date(2015, 3, 11),
        end: new Date(2015, 3, 13),
        desc: "Big conference for important people"
      },
      {
        id: 6,
        title: "Meeting",
        start: new Date(2015, 3, 12, 10, 30, 0, 0),
        end: new Date(2015, 3, 12, 12, 30, 0, 0),
        desc: "Pre-meeting meeting, to prepare for the meeting"
      },
      {
        id: 7,
        title: "Lunch",
        start: new Date(2015, 3, 12, 12, 0, 0, 0),
        end: new Date(2015, 3, 12, 13, 0, 0, 0),
        desc: "Power lunch"
      },
      {
        id: 8,
        title: "Meeting",
        start: new Date(2015, 3, 12, 14, 0, 0, 0),
        end: new Date(2015, 3, 12, 15, 0, 0, 0)
      },
      {
        id: 9,
        title: "Happy Hour",
        start: new Date(2015, 3, 12, 17, 0, 0, 0),
        end: new Date(2015, 3, 12, 17, 30, 0, 0),
        desc: "Most important meal of the day"
      },
      {
        id: 10,
        title: "Dinner",
        start: new Date(2015, 3, 12, 20, 0, 0, 0),
        end: new Date(2015, 3, 12, 21, 0, 0, 0)
      },
      {
        id: 11,
        title: "Birthday Party",
        start: new Date(2015, 3, 13, 7, 0, 0),
        end: new Date(2015, 3, 13, 10, 30, 0)
      },
      {
        id: 12,
        title: "Late Night Event",
        start: new Date(2015, 3, 17, 19, 30, 0),
        end: new Date(2015, 3, 18, 2, 0, 0)
      },
      {
        id: 12.5,
        title: "Late Same Night Event",
        start: new Date(2015, 3, 17, 19, 30, 0),
        end: new Date(2015, 3, 17, 23, 30, 0)
      },
      {
        id: 13,
        title: "Multi-day Event",
        start: new Date(2015, 3, 20, 19, 30, 0),
        end: new Date(2015, 3, 22, 2, 0, 0)
      },
      {
        id: 14,
        title: "Today",
        start: new Date(new Date().setHours(new Date().getHours() - 3)),
        end: new Date(new Date().setHours(new Date().getHours() + 3))
      },
      {
        id: 15,
        title: "Point in Time Event",
        start: now,
        end: now
      }
    ];
    this.state = {
      name: "React",
      showModal: false,
      events
    };
    this.openModal = this.openModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleCloseModal() {
    this.setState({ showModal: false });
  }

  openModal() {
    this.setState({ showModal: true });
  }

  render() {
    return (
      <div>
        <div style={{ height: "500pt" }}>
          <Calendar
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
            defaultDate={moment().toDate()}
            localizer={localizer}
            onDrillDown={this.openModal}
          />
        </div>
        {this.state.showModal ? (
          <CreateEvent
            isOpen={this.state.showModal}
            onClose={this.handleCloseModal}
          />
        ) : (
          ""
        )}
      </div>
    );
  }
}
export default ShowCalendar;

2-й компонент: Modal.jsx 

import React, { Component } from "react";
import { Modal, Button, Header, Icon } from "semantic-ui-react";
export default class CreteEvent extends Component {
  render() {
    return (
      <div>
        <Modal isOpen={this.props.isOpen}>
          <Modal.Header>Create Event</Modal.Header>
          <Modal.Content>
            <Modal.Description>Hi Everyone</Modal.Description>
          </Modal.Content>

          <Modal.Actions>
            <Button primary onClick={this.props.onClose}>
              Close <Icon name="right chevron" />
            </Button>
          </Modal.Actions>
        </Modal>
      </div>
    );
  }
}

Вот весь код "Код: "https://codesandbox.io/s/strange-bhaskara-1n1jc" "

Ответы [ 2 ]

0 голосов
/ 03 марта 2020

Итак, я зашел в офис и мог посмотреть, вы никогда не включаете в индекс семанти c UI css: https://react.semantic-ui.com/usage/#theme

В индекс. js https://react.semantic-ui.com/usage/#theme и добавьте semantic-ui-css в качестве зависимости, и, как @PompolutZ упомянул модальные потребности open против isOpen

Возможно, есть некоторые другие проблемы, но изменение состояния по умолчанию на true теперь показывает модальный - возможно, просто нужно исправить, как отображается модальный, то есть когда вызывается openModal. (А вот щелчок по дате - это драйвер (никогда раньше не использовал компонент календаря: приходилось просматривать документы)

https://codesandbox.io/s/morning-darkness-hz06m?fontsize=14&hidenavigation=1&theme=dark

0 голосов
/ 03 марта 2020

Добавить зависимость к semanti c -ui- css

Импорт css в ваш основной индекс. js файл: 

import 'semantic-ui-css/semantic.min.css';

Вам нужно изменить isOpen на open в режиме: 

import React, { Component } from "react";
import { Modal, Button, Header, Icon } from "semantic-ui-react";
export default class CreteEvent extends Component {
  render() {
    return (
      <div>
        <Modal open={this.props.isOpen}>
          <Modal.Header>Create Event</Modal.Header>
          <Modal.Content>
            <Modal.Description>Hi Everyone</Modal.Description>
          </Modal.Content>

          <Modal.Actions>
            <Button primary onClick={this.props.onClose}>
              Close <Icon name="right chevron" />
            </Button>
          </Modal.Actions>
        </Modal>
      </div>
    );
  }
}

Вот фиксированные коды и поля: https://codesandbox.io/s/sad-lamport-y6jqg (с вышеупомянутым импорт)

...