当我们使用reactjs点击它时如何显示Modal？

Question

我是新手，想创建一个日历，并想将事件添加到日历中的相应日期，当我们单击该字段时，它应该显示模态弹出窗口，但模态未显示。这里我只使用语义-ui-react 来设计每个组件。谁能帮我解决这个问题？

第一个组件：

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;

第二部分：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>
    );
  }
}

这是完整的代码"Code: "https://codesandbox.io/s/strange-bhaskara-1n1jc""

Answer 1

添加对semantic-ui-css

的依赖

在您的 index.js 主文件中导入 css：

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

您需要在 Modal 中将 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（前面提到的导入）

Answer 2

所以我已经到办公室了，可以看看，你从来没有包括语义 UI css: https://react.semantic-ui.com/usage/#theme

在 index.js https://react.semantic-ui.com/usage/#theme 中添加 semantic-ui-css 作为依赖项，正如@PompolutZ 提到的模态需要 open vs isOpen

可能还有一些其他问题，但将默认状态更改为 true 现在会显示模态 - 可能只需要修复模态的显示方式，即何时调用 openModal。（啊点击日期是驱动（以前没用过日历组件：得看文档）

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

当我们使用reactjs点击它时如何显示Modal？

How to show Modal when we click on it using reactjs?

reactjs

semantic-ui-react

react-big-calendar