訪問 fullCalendar v5 的實例

Question

我在我的 React 應用程序中初始化了 fullCalendar v5，如下所示：

class CalendarComponent extends Component {
   
  state = { searchable: false, dateable: false }


   componentDidMount() {
    this.initialCalendar();        
   }

initialCalendar() {
var calendarEl = document.getElementById('calendar');

var calendar = new Calendar(calendarEl, {
  plugins: [ interactionPlugin, dayGridPlugin, momentPlugin, timeGridPlugin ],
   .
   .
   .
});

calendar.render();
}

handleGoToDate(event) {
if (event.key === 'Enter') { 
  // Have access to instance of calendar here and perform this function 
   calendar.gotoDate(this._go_date.value);      
}
}

render() {
 return (
  <div id="calendar"/>

  <input type='text'
    id="inputGoDate"            
    ref={(c) => this._go_date = c}
    onKeyDown={this.handleGoToDate.bind(this)}/>
 )
}
}

一切正常，現在我想訪問fullCalendar實例， fullCalendar在gotoDate()函數之外的函數中使用gotoDate() initialcalendar()函數。 我怎樣才能擁有fullCalendar的實例？ 到目前為止，我嘗試在我的組件中使用calendarComponentRef = React.createRef()但它沒有用。 看起來如果我想使用React.createRef()我必須以另一種方式初始化我的日歷。 我正在尋找一種解決方案，以無需更改我初始化日歷的方式即可訪問日歷實例。 有沒有辦法以這種方式訪問​​日歷實例？

Answer 1

阿戴森是對的。 你不應該像那樣混合 React 和原生 Javascript。

按照此處的 React 設置文檔進行操作： https : //fullcalendar.io/docs/react

然后，一旦您這樣做以訪問 Calendar 對象，您就必須看到“日歷 API”部分。 請參閱此示例代碼：

export default class DemoApp extends React.Component {

  calendarRef = React.createRef()

  render() {
    return (
      <FullCalendar ref={this.calendarRef} plugins={[ dayGridPlugin ]} />
    )
  }

  someMethod() {
    let calendarApi = this.calendarRef.current.getApi()
    calendarApi.next()
  }

}