React fullCalendar - 交互不起作用答案

【问题标题】：React fullCalendar - Interaction not workingReact fullCalendar - 交互不起作用
【发布时间】：2020-08-24 08:44:08
【问题描述】：

我正在尝试在 React 项目中使用 FullCalendar，我需要能够为每次点击创建事件。所以我跟着部分代码：

https://codesandbox.io/s/github/fullcalendar/fullcalendar-example-projects/tree/master/react?file=/src/DemoApp.jsx

显示日历，我使用api修改当前日期，所以我有工作。但是，我无法与之互动。我安装了 fullCalendar/interaction 并在组件中指定了插件，但在 select & dateclick 没有任何反应... 我把我的代码的一部分，你有什么想法吗？：/

非常感谢

import React, {useEffect, useState, useRef} from 'react'
import DayPicker from 'react-day-picker';
import MomentLocaleUtils from 'react-day-picker/moment';
import 'moment/locale/fr';

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const RoomsCalendars = ({match}) => {

    const {id} = match.params

    const [selectedDay, setSelectedDay] = useState()

    useEffect(() => {
        setSelectedDay(new Date())
    }, [])
    
    const calendarRef = useRef(null)

    const  handleDayClick = day => {
        setSelectedDay(day);
        let calendarApi = calendarRef.current.getApi()
        calendarApi.gotoDate(day)
    }

    const handleTodayClick = day => {
        setSelectedDay(day)
        let calendarApi = calendarRef.current.getApi()
        calendarApi.gotoDate(day)
    }

    return(
        <>
            <h1>Salle {id}</h1>
            <div className="row">
                <div className="lg-3 md-4 sm-12">
                    <div className="card">
                        <DayPicker 
                            localeUtils={MomentLocaleUtils}
                            locale="fr"
                            todayButton="Aujourd'hui"
                            onDayClick={handleDayClick}
                            selectedDays={selectedDay}
                            onTodayButtonClick={(day) => handleTodayClick(day)}
                            fixedWeeks 
                        />
                    </div>
                </div>
                <div className="lg-9 md-8 sm-12">
                    <div className="card">
                            <FullCalendar
                                plugins={[timeGridPlugin, dayGridPlugin,interactionPlugin]}
                                initialView="dayGridMonth"
                                headerToolbar={{
                                    left:'prev,next',
                                    center:'title',
                                    right:'dayGridMonth,timeGridWeek,timeGridDay'
                                }}
                                ref={calendarRef}
                                locale="fr"
                                slotMinTime="07:00:00"
                                slotMaxTime="20:00:00"
                                height={700}
                                editable={true}
                                selectable={true}
                                selectMirror={true}
                                dayMaxEvents={true}
                                select={console.log('select')} //NOT WORKING HERE
                                dateClick={console.log('dateclick')} //SAME
                            />
                    </div>
                </div>
            </div>
        </>
    )
}

export default RoomsCalendars

【问题讨论】：

从我在fullcalendar.io/docs/react 的“回调”部分中可以看到，您可能必须为每个事件指定一个单独的函数作为选项 - 例如select={console.log('select')} 需要是 select={this.logSelection}，然后在组件的其他位置有另一个函数 logSelection = (arg) => { console.log("select"); }。这些示例没有显示如何/是否可以将可执行代码直接放入选项配置中。至少你必须将它放入我期望的匿名回调块中，就像普通的 JS 一样。
确实我为示例进行了简化，但我已经尝试过这样的事情：select={() => logSection} 通过控制台登录const logSection = () => { console.log('select') } 但它也不起作用：/
你试过像例子一样使用它吗？例如select={logSection}
我发现... fullcalendar/core 安装在 5.2.0 版本，而 fullcalendar/interaction 安装在 5.3.0... 我刚刚做了一个核心版本升级

标签： javascript reactjs fullcalendar

【解决方案1】：

试试这个

npm i @fullcalendar/交互

【讨论】：

谢谢！这对我有用。

【解决方案2】：

我也遇到了同样的问题，试试 eventClick 方法

eventClick = {(args) => handleDateClick(args)}
    select={console.log('select')} //NOT WORKING HERE
    dateClick={console.log('dateclick')} //SAME

const handleDateClick = (arg) => {
        console.log(arg);
    }

【讨论】：