访问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的实例，以便在initialcalendar()函数之外的函数中使用gotoDate()函数。如何获得fullCalendar的实例？到目前为止，我尝试在组件中使用calendarComponentRef = React.createRef()，但没有成功。看起来如果我想使用React.createRef()，我必须用另一种方式初始化我的日历。我正在寻找一个解决方案，可以访问日历的实例，这样我就不需要更改我草签日历的方式。有没有办法通过这种方式访问日历的实例？

Answer 1

ADyson是对的。你不应该像那样混合React和原生Javascript。

请按照此处的React设置文档进行操作：https://fullcalendar.io/docs/react

然后，一旦你这样做以访问日历对象，你就必须看到"日历"；日历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()
}
}