Как использовать метод rerenderEvents () в предварительно отрендеренном Календаре - PullRequest
Новая
       14

Как использовать метод rerenderEvents () в предварительно отрендеренном Календаре

0 голосов
/ 23 марта 2019

ОБНОВЛЕНО 3-26-2019

Я пытаюсь дать пользователям возможность добавлять события в календарь и отображать эти события при вводе. Я использую интерфейс React.js и могу отображать события в новом календаре, но он не удаляет старый (я просто получаю календари 10 + , которые отображаются друг на друге ).

Я пытался использовать метод .destroy(), а затем повторно отображать календарь, но этот метод, кажется, недоступен / не работает, поэтому я решил, что попробую rerenderEvents() и сохраню тот же объект календаря, но эту функцию Кажется, также не доступны. Хотелось бы помочь в решении этой проблемы со всеми, кто знаком с FullCalendar v.4

Как только пользователь вводит собранные данные в объект данных и добавляет их в состояние, но если я просто зеркально отражаю вышесказанное, он отображает новый календарь поверх старого.

Это похоже на то, что я не могу получить объект Календаря, как только он будет обработан для выполнения этих вызовов методов, но у меня проблемы с захватом его в отдельной функции. Все, что говорят доктора, - это позвоните по номеру .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();
    }

Но это ничего не делает. Я даже не могу выполнить render () из handleNewEvent (), так как кажется, что состояние не может содержать функции в нем, и я не могу найти способ передать функцию из ComponentDidMount () в handleNewEvent (). Я в растерянности ...

...