创建新事件时更新 react-big-calendar 组件

Question

我正在使用 react-big-calendar 并希望让用户能够在将鼠标拖到日历上到 select date/time 范围时创建一个新事件create events demonstration.

但是，我编写的代码不会在成功创建事件时重新呈现组件。用户能够创建一个新事件，如果用户 select 有另一个视图（例如议程），它将显示 - 然后将出现在所有视图中。但是，根据演示，它不会立即显示在当前视图中。

我相当确定答案在于 useEffect；但我正在兜圈子想弄明白。

import React, { useState  } from 'react';
import './App.css';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

function MyCalendar() {
    const localizer = momentLocalizer(moment)
    const [eventsList, setEventsList] = useState([]);

    function handleSelect ({ start, end }) {
        const title = window.prompt('New Event name')
        if (title) {
            var newEvent = {
                start: start,
                end: end,
                title: title 
            }
            let updateEventsList = eventsList;
            updateEventsList.push(newEvent);
            setEventsList(updateEventsList);
        }
    };

    return (
        <div>
        <Calendar
        selectable
        defaultView="week"
        defaultDate={new Date()}
        localizer={localizer}
        events={eventsList}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
        onSelectSlot={handleSelect}
        />
        </div>
    )
}

function App() {
    return (
        <div>
        <MyCalendar />
        </div>
    );
}

export default App;

Answer 1

React 不喜欢突变，因此您的代码运行错误。

你需要改变你的功能

  function handleSelect({ start, end }) {
    const title = window.prompt("New Event name");
    if (title) {
      var newEvent = {
        start: start,
        end: end,
        title: title
      };
      setEventsList([...eventsList, newEvent]);
    }
  }

在这个函数中我只改变了这些字符串

let updateEventsList = eventsList;
updateEventsList.push(newEvent);
setEventsList(updateEventsList);

我也是这样做的

setEventsList([...eventsList, newEvent]);

创建新事件时更新 react-big-calendar 组件

Update react-big-calendar component when new event created

javascript

reactjs

react-big-calendar

react-hooks