javascript - 如何使用react-calendar动态渲染列表？

Question

我想在用户点击应用程序上显示的日历上的某个日期后，呈现安排在某个日期的类(class)列表。

我正在使用react-calendar为了这。

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

我现在想要的是呈现与日历上选择的日期相关的列表。例如 - 单击 2 月 13 日的日历即可渲染 2 月 13 日的所有类(class)。

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

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

请查看完整代码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;