我正在尝试实现事件过滤器。我从父母组件获取事件作为道具,并将其传递给日历组件。事件无需过滤即可很好地呈现。我使用了一个简单的切换复选框按钮来根据对象属性过滤这些事件。过滤事件时会引发此异常。
我在互联网上阅读了有关例外的信息。当插件尝试在react之外操作DOM时引发。
imports ...
const localizer = BigCalendar.momentLocalizer(moment) // or globalizeLocalizer
class ProgramCalendar extends React.Component {
constructor(props) {
super(props)
this.state = {
allDayFilter: false,
}
}
toggleAllDay = () => {
this.setState(state => ({
allDayFilter: !state.allDayFilter,
}),this.filteredEvents)
}
filteredEvents = () => {
const { allDayFilter, } = this.state
const { fragmentedEvents: events } = this.props
console.log(events)
if (allDayFilter) {
return events.filter(event => (event.content_type === 'basereward'))
}
return events
}
render() {
const events = this.filteredEvents()
return (
<div className="calendar-container" >
<input type="checkbox" onChange={this.toggleAllDay}/>
<div style={{height: '100vh'}}>
<BigCalendar
localizer={localizer}
defaultDate={new Date()}
events={events}
/>
</div>
</div>
);
}
}
export default ProgramCalendar;