单击 react-big-calendar 中的事件后显示弹出窗口

Question

我创建了Event ()它作为自定义组件传递给的函数

<Calendar components = {{

   event: Event

}}/>

然后在Event ()函数中创建变量popoverClickRootClose，在其中放置 react-bootstrap popover。然后popoverClickRootClose传递给组件：

<OverlayTrigger overlay = {popoverClickRootClose}>

     <div> {event.title}</ div>

</ OverlayTrigger>

单击事件后不会出现弹出窗口。有人可以告诉我我做错了什么吗？

演示在这里：https : //stackblitz.com/edit/react-umtvgs

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 {Overlay} from 'react-bootstrap';

import {OverlayTrigger} from 'react-bootstrap';

import {Popover} from 'react-bootstrap';

const localizer = momentLocalizer(moment);

function Event({ event }) {

  let popoverClickRootClose = (

    <Popover id="popover-trigger-click-root-close" style={{ zIndex: 10000 }}>

      <strong>Holy guacamole!</strong> Check this info.

      <strong>{event.title}</strong>

    </Popover>

  );

  console.log(event);

  return (

    <div>

      <div>

        <OverlayTrigger id="help" trigger="click" rootClose container={this} placement="bottom" overlay={popoverClickRootClose}>

          <div>{event.title}</div>

        </OverlayTrigger>

      </div>

    </div>

  );

}

class App extends Component {

  constructor() {

    const now = new Date();

    const events = [

      {

          id: 0,

          title: 'All Day Event very long title',

          allDay: true,

          start: new Date(2019, 6, 0),

          end: new Date(2019, 6, 1),

          description: 'sdsdsdsdsdsdsdsd'

      },

      {

          id: 1,

          title: 'Long Event',

          start: new Date(2019, 3, 7),

          end: new Date(2019, 3, 10),

          description: 'yyyyyyyyyyyyyyyyyy'

      },

      {

          id: 2,

          title: 'Right now Time Event',

          start: now,

          end: now,

          description: 'cddffffffffdfdfdfd'

      },

    ]

    this.state = {

      events

    };

  }

Answer 1

您发布的 Javascript 代码没有问题。这是一个 CSS 问题您已经包含了多个 bootstrap css 版本（bootstrap 4 和 3）并且react-bootstrap软件包版本0.32运行良好，仅适用于bootstrap 34.3.1从 html 中删除bootstrap引用，因为它与您使用的 react-bootstrap 包不兼容。改变..<link&nbsp; rel="stylesheet"&nbsp; href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&nbsp; integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"&nbsp; crossorigin="anonymous"/><link&nbsp; rel="stylesheet"&nbsp; href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&nbsp; integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"&nbsp; crossorigin="anonymous"/>到<link&nbsp; &nbsp; &nbsp; rel="stylesheet"&nbsp; &nbsp; &nbsp; href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&nbsp; &nbsp; &nbsp; integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"&nbsp; &nbsp; &nbsp; crossorigin="anonymous"&nbsp; &nbsp; />我已经添加了有效的 stackblitz 链接作为评论。