[英]React big calendar, render component when clicking on an event
I would like to render a component next to an event when it is clicked to show more information. 我想在单击事件以显示更多信息时在事件旁边呈现一个组件。 Something like this https://i.stack.imgur.com/jOVsE.png 像这样的东西https://i.stack.imgur.com/jOVsE.png
I can use onSelectEvent to create a modal but I have no idea how to put the modal next to the event that was just clicked. 我可以使用onSelectEvent创建模态,但是我不知道如何将模态放在刚刚单击的事件旁边。 I have looked into creating custom events with a popover contained within the event text but there seems to be no way to fire the click event from with in the event and I cannot work out how to do it from onSelectEvent. 我已经研究过使用事件文本中包含的弹出窗口来创建自定义事件,但是似乎没有办法在事件中触发带有click事件的方法,而且我无法弄清楚如何从onSelectEvent中进行操作。
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.