Question

我正在尝试实现反应大日历，但是我在添加事件和使用设置状态更新事件时遇到问题。我在 Selectable 构造函数中引入了 handleselect 函数，但是当我尝试使用它时，出现以下错误

TypeError: 无法读取未定义的属性“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;

Answer 1

this.handleSelect

'this' 超出范围。尝试在 Select 类中移动您的函数！

在您看到结果后，您可能会了解发生了什么。快乐编码！

Answer 2

看起来 class Job(){ Job[] DependentJobs { ... } Food MyFood { ... } // Returns true if all required food is ready. bool FoodAvailable { get { // First check if this object has food in it's own right: if(MyFood != ready) return false else // Second, if the first check passes, check child / dependent jobs: foreach(job in DependentJobs){ if(job.FoodAvailable == false) return false } return true } } } 和 MyCalendar 是两个不同的组件。

在 Selectable 上，您试图从 MyCalendar 对象中读取一些值，但是，由于它和箭头函数没有上限，this 是 this。< /p>

请记住，undefined 组件中没有渲染功能。

类型错误：无法读取未定义的属性“handleSelect”

2 个答案: