0

2019 年 3 月 26 日更新

我试图让用户能够将事件添加到日历中，并让这些事件在输入时出现。我正在使用 React.js 前端，并且可以让事件在新日历中呈现，但它不会删除旧日历（我最终会得到 10 多个相互叠加的日历）。

我尝试使用该.destroy()方法，然后重新渲染日历，但该方法似乎不可用/无法正常工作，所以我想我会尝试rerenderEvents()保留相同的日历对象，但该功能似乎也无法访问。希望熟悉FullCalendar v.4的任何人帮助解决这个问题

一旦用户将收集到的数据输入到数据对象中并将其附加到状态中，但如果我只是镜像上述内容，它会在旧日历之上呈现一个全新的日历。

就像我无法在渲染后获取 Calendar 对象以进行这些方法调用，但在单独的函数中捕获它时遇到了麻烦。所有文档都说是调用.destroy()或调用.rerenderEvents()而不是调用它们。


//This successfully Renders
    componentOnMount() {
                 var calendarNew = document.getElementById('calendar');



            let newCalendar = new Calendar(calendarNew, {
                plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
                events: this.state.events
            });


            console.log(newCalendar)

            await this.setState({ calendarObj: newCalendar })

            // let myNewEvents = newCalendar.getEvents()
            // console.log(myNewEvents)
            // let stateEvents = this.state.calendarObj.getEvents()
            // console.log(stateEvents)

            this.state.calendarObj.render();


    }

我尝试了以下方法来减轻双重渲染......


    async handleNewEvent() {
    // code that creates an object and sets the state to the new event array//
        var newEventArr = existingEvents.concat(newEvent)
        console.log(newEventArr)

        await this.setState({ events: newEventArr })
        await this.setState({ currentIndex: (this.state.currentIndex + 1) })
        this.props.change(this.state.events, this.state.currentIndex)

        //Contains the new event array in the console
        console.log(this.state.events)

       this.state.calendarObj.rerenderEvents();
    }

但这无济于事。我什至无法从handleNewEvent() 中渲染()，因为它看起来好像状态无法在其中保存函数，并且我找不到将函数从ComponentDidMount() 传递给handleNewEvent() 的方法。我不知所措...

4

0 回答 0