強制更新jQuery fullcalendar，在React.js中更改prop後

我很努力地更新事件prop更改後更新的jQuery fullcalendar。強制更新jQuery fullcalendar，在React.js中更改prop後

下面是一個包含數據&日曆類：

export default class Calendar extends Component { 
    constructor(props) { 
    super(props); 
    this.addEvent = this.addEvent.bind(this); 
    this.state = { 
     events: [ 
     { 
      title: 'Sometitle', 
      date: moment(Date.now()), 
      allDay: false, 
     }, 
     ], 
    }; 
    } 

    addEvent() { 
    const date = moment(Date.now()).add(1, 'hour'); 
    this.setState({ 
     events: [].concat(this.state.events, [{ 
     title: 'Sometitle 1', 
     date, 
     allDay: false, 
     }]), 
    }); 
    } 

    render() { 
    return (
     <div className="allow-scroll"> 
     <button onClick={this.addEvent}> Add event</button> 
     <EmployeesCalendar events={this.state.events} /> 
     </div> 
    ); 
    } 
}

，這裏是包含fullcalendar插件類：

import React, { Component } from 'react'; 
import jQuery from 'jquery'; 

require('fullcalendar'); 

export default class EmployeesCalendar extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     events: props.events, 
    }; 
    } 

    componentDidMount() { 
    const { fullCalendar } = this; 

    jQuery(fullCalendar).fullCalendar({ 
     events: this.state.events, 
    }); 
    } 

    componentWillReceiveProps(nextProps, nextState) { 
    const { fullCalendar } = this; 
    const { events } = nextState; 
    this.setState({ 
     events: nextProps.events, 
    },() => { 
     console.log(this.state.events); 
     jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.event); 
    }); 
    } 

    componentWillUnmount() { 
    const { fullCalendar } = this; 
    jQuery(fullCalendar).fullCalendar('destroy'); 
    } 

    render() { 
    return (
     <div ref={(calendar) => { this.fullCalendar = calendar; }} /> 
    ); 
    } 
}

我的addEvent功能，增加了新的事件數組和比我將它傳遞到EmployeesCalendar。

在EmployeesCalendar中，我更新componentWillReceiveProps中的事件狀態，並將它傳遞給fullcalendar插件，強制更新它。但fullcalendar從不更新。

有什麼建議嗎？

來源

2017-02-01 Michał Lach

而不是 'refetchEventSources'

jQuery(fullCalendar).fullCalendar('rerenderEvents');

來源

2017-02-01 14:51:30

已經嘗試了這個，'render'，'refetchEvents'事件也一樣 –

你的意思jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.events);而不是jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.event);爲你寫的嗎？

來源

2017-03-22 17:07:00 pdorns

是的，我已經注意到這個錯字，它仍然不起作用。 –

refetchEvents方法適用於我，但直到我將事件配置爲具有回調函數的事件而不是數組。

取而代之的是componentWillReceiveProps，我使用了componentDidUpdate，它在狀態或道具實際更改後觸發。我認爲componentWillReceiveProps可以工作，但它是比您需要的更早的事件。它給你一個改變狀態的機會，你不需要做。

componentDidMount() { 
    const { fullCalendar } = this; 
    jQuery(fullCalendar).fullCalendar({ 
     events: (start, end, timezone, callback) => { 
     callback(this.state.events); 
     }, 
    }); 
    } 

    componentDidUpdate(nextProps, nextState) { 
    const { fullCalendar } = this; 
    jQuery(fullCalendar).fullCalendar('refetchEvents'); 
    }

按照FullCalendar doc，「FullCalendar會當用戶點擊上一頁/下一頁或切換視圖調用此函數時，它需要新的事件數據。這是觸發。」它也似乎在您運行refetchEvents時觸發。也許rerenderEvents呢？我沒有嘗試那個。

來源

2017-07-08 06:29:47 grimmdav

謝謝爲我工作:) – Deano

強制更新jQuery fullcalendar，在React.js中更改prop後

回答

相關問題