Блог

Я пытаюсь реализовать календарь react big, однако у меня проблема с добавлением события и использованием состояния set для обновления события. Я ввел функцию handleselect в конструктор выбора, но когда я пытаюсь ее использовать, я получаю следующую ошибку

Ошибка типа: Не удается прочитать свойство ‘handleSelect’ неопределенного

 import React, { useState } from "react";
import "react-big-calendar/lib/css/react-big-calendar.css";
import Navigation from "../components/Navigation";
import events from "./events";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";

const localizer = momentLocalizer(moment);

class Selectable extends React.Component {
  constructor(props) {
    super(props);

    this.state = { events };
  }

  handleSelect = ({ start, end }) => {
    const title = window.prompt("New Event name");

    alert("title "   title);

    if (title) {
      console.log("testing");


      this.setState({
        events: [
          this.state.events,
          {
            start,
            end,
            title,
          },
        ],
      });

      console.log(events);
    }
  };

}

const MyCalendar = (props) => (
  <div>
    <Navigation />
    <Calendar
      selectable
      localizer={localizer}
      events={events}
      popup
      startAccessor="start"
      endAccessor="end"
      style={{ height: 700 }}
      onSelectSlot={this.handleSelect}
    />
  </div>
);
export default MyCalendar;
 

Это похоже MyCalendar и Selectable представляет собой два разных компонента.

На MyCalendar вы пытаетесь прочитать некоторые значения из this объекта, но, поскольку это функция и стрелка без верхней области видимости, this это undefined так .

Имейте в виду Selectable , что компонент не имеет функции рендеринга.

 this.handleSelect
 

«это» выходит за рамки. Попробуйте переместить свою функцию в выбранный класс!

После того, как вы увидите результат, может быть, вы получите представление о том, что произошло. Счастливого кодирования!