如何使用react-calendar动态呈现列表？

Question

我想呈现一个在某个日期安排的课程列表，一旦用户点击这个日期，在日历上，显示在应用程序上。

为此，我使用了react-calendar。

我已经使用onClickDay function做了一个测试，看看它是否会呈现我已经有的列表，并且它起作用了。因此，当我单击任何一天时，都会呈现一个列表。

我现在想要的是呈现一个与日历上选择的日期相关的列表。例如，点击2月13日的日历，渲染2月13日的所有课程。

我假设我需要在state上的类的array上设置日期和时间，这样我就可以验证在日历上选择的日期是否与在state上设置的日期匹配，从而相应地呈现适当的列表。

我没有在这个库的文档中找到如何进行这种验证，这种验证可以将日历中的日期与我的类的array中的日期进行比较。

请参阅完整的代码here

下面是这段代码的打印结果：

import React from "react";
import "./styles.css";
import Calendar from "react-calendar";

class App extends React.Component {
  state = {
    date: new Date(),
    classes: [
               { id: 1, name: "foo1" }, 
               { id: 2, name: "foo2" }
             ],
    displayClasses: false
  };

  onChange = date => this.setState({ date });
  displayClasses = () => {
    this.setState({ displayClasses: true });
  };
  render() {
    let classes = null;
    if (this.state.displayClasses) {
      classes = this.state.classes.map(cl => {
        return <li key={cl.id}>{cl.name}</li>;
      });
    }
    return (
      <div className="App">
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
          onClickDay={this.displayClasses}
        />
        <br />
        <ul>{classes}</ul>
      </div>
    );
  }
}

export default App;

Answer 1

onChange处理程序将用户单击的日期(作为日期对象)作为第一个参数提供给您。

您可以简单地检查日期是否是您希望有条件地显示某些内容的特定日期。例如，使用date.valueOf()，您可以获得以毫秒为单位的日期。

import React from "react";
import "./styles.css";
import Calendar from "react-calendar";

class App extends React.Component {
  state = {
    date: new Date(),
    classes: [{ id: 1, name: "foo1" }, { id: 2, name: "foo2" }],
    displayClasses: false,
  };

  onChange = date => {
    this.setState({ date });
  };

  displayClasses = () => {
    this.setState({ displayClasses: true });
  };

  render() {
    const { classes, date } = this.state;

    return (
      <div className="App">
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
          onClickDay={this.displayClasses}
        />
        <br />
        <ul>
          {date.valueOf() === 1581548400000 &&
            classes.map(cl => {
              return <li key={cl.id}>{cl.name}</li>;
            })}
        </ul>
      </div>
    );
  }
}

export default App;