Реагируйте на большой календарь, визуализируйте компонент при нажатии на событие

Question

Я хотел бы отобразить компонент рядом с событием, когда по нему щелкают, чтобы показать больше информации. Как то так https://i.stack.imgur.com/jOVsE.png

Я могу использовать onSelectEvent для создания модального, но я понятия не имею, как поставить модальное значение рядом с событием, которое было только что нажато. Я рассмотрел создание пользовательских событий с всплывающим окном, содержащимся в тексте события, но, похоже, нет никакого способа вызвать событие click из with в событии, и я не могу понять, как это сделать из onSelectEvent.

Answer 1

import React from 'react';
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      popoverOpen: false
    };
  }

  toggle() {
    this.setState({
      popoverOpen: !this.state.popoverOpen
    });
  }

  render() {
    return (
      <div>
        <Button id="Popover1" type="button">
          Launch Popover
        </Button>
        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
          <PopoverBody>/*Your date picker code goes here*/</PopoverBody>
        </Popover>
      </div>
    );
  }
}

Проверка на рефренс (реактивная полоса)