单击react-big-calendar中的事件后显示弹出窗口 [英] Displaying popover after clicking on an event in react-big-calendar
问题描述
我创建了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
};
}
render() {
return (
<div style={{ height: '500pt'}}>
<Calendar
events={this.state.events}
startAccessor="start"
endAccessor="end"
defaultDate={moment().toDate()}
localizer={localizer}
components={{
event: Event
}}
/>
</div>
);
}
}
render(<App />, document.getElementById('root'));
您发布的Javascript代码没有问题.这是CSS问题
您已包含多个Bootstrap CSS版本( Bootstrap 4和3 )，并且react-bootstrap软件包版本为0.32，仅在 Bootstrap 3 中有效/p>
从html
删除引导4.3.1引用，因为它与您使用的react-bootstrap软件包不兼容.
更改..
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
到
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
我已经添加了工作中的stackblitz链接作为注释.
I created the Event () function that it passes as a custom component to
<Calendar components = {{
event: Event
}}/>
Then in the Event () function I create the variable popoverClickRootClose, in which I place the react-bootstrappopover. Then popoverClickRootClose passes to the component:
<OverlayTrigger overlay = {popoverClickRootClose}>
<div> {event.title}</ div>
</ OverlayTrigger>
After clicking in the event no popover appears. Could someone advise me what I am doing wrong?
Demo here: 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
};
}
render() {
return (
<div style={{ height: '500pt'}}>
<Calendar
events={this.state.events}
startAccessor="start"
endAccessor="end"
defaultDate={moment().toDate()}
localizer={localizer}
components={{
event: Event
}}
/>
</div>
);
}
}
render(<App />, document.getElementById('root'));
There is no issue with the Javascript code you posted. It's a CSS issue
You have included multiple bootstrap css versions (bootstrap 4 and 3) and the react-bootstrap package version is 0.32 which works well, only with bootstrap 3
Remove bootstrap 4.3.1 reference from the html as its not compatible with the react-bootstrap package you are using.
Change..
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
to
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
I have added the working stackblitz link as a comment.
这篇关于单击react-big-calendar中的事件后显示弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
