时间戳

首页 > 解决方案 > 如何使用 react-calendar 动态呈现列表？

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

问题描述

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

我为此使用反应日历。

我已经使用onClickDay functionavailable 进行了测试，以查看它是否会呈现我拥有的列表并且它有效。因此，当我单击任何一天时，都会呈现一个列表。

我现在想要的是呈现与日历上选择的日期相关的列表。例如 - 在 2 月 13 日单击日历后呈现 2 月 13 日的所有课程。

我想我需要array在我的课程上设置日期和时间，state以便我可以验证日历上选择的日期是否与设置的日期相匹配，state以相应地呈现适当的列表。

我没有在这个库的文档中找到如何进行这种验证，它将日历中的日期与我array在课堂上的任何日期进行比较。

请在此处查看完整代码

下面是这个代码片段的打印：

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;

标签： javascriptreactjs

解决方案

处理程序为您提供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;

推荐阅读