Question

目标：在日期选择器指定的日期显示日历中的数据。

问题：我无法将数据分配给特定日期-所有日历日期都显示相同的数据。

日历组件是通过将函数传递到其dateCellRender道具来呈现的，该道具生成要在单元格中显示的内容。传递给dateCellRender的函数接受一个moment对象作为其唯一参数，该对象由datepicker表单生成。我检查了Moment对象，那里的一切看起来都很不错，即调用moment.date（）返回一个数字。

我试图模仿documentation中的模式，但是我一直遇到相同的问题。

我真正困惑的是应该在哪里进行过滤以及幕后发生的事情。是否为日历中的每个单元格调用dateCellRender并仅在满足条件时才显示内容？

谢谢。

文档示例“日历”在每月的8号，10号和15号显示列表数据。我把它放在这里是为了方便。我的代码如下。

function getListData(value) {
  let listData;
  switch (value.date()) {
    case 8:
      listData = [
        { type: 'warning', content: 'This is warning event.' },
        { type: 'normal', content: 'This is usual event.' },
      ]; break;
    case 10:
      listData = [
        { type: 'warning', content: 'This is warning event.' },
        { type: 'normal', content: 'This is usual event.' },
        { type: 'error', content: 'This is error event.' },
      ]; break;
    case 15:
      listData = [
        { type: 'warning', content: 'This is warning event' },
        { type: 'normal', content: 'This is very long usual event。。....' },
        { type: 'error', content: 'This is error event 1.' },
        { type: 'error', content: 'This is error event 2.' },
        { type: 'error', content: 'This is error event 3.' },
        { type: 'error', content: 'This is error event 4.' },
      ]; break;
    default:
  }
  return listData || [];
}

function dateCellRender(value) {
  const listData = getListData(value);
  return (
    <ul className="events">
      {
        listData.map(item => (
          <li key={item.content}>
            <span className={`event-${item.type}`}>●</span>
            {item.content}
          </li>
        ))
      }
    </ul>
  );
}

ReactDOM.render(
  <Calendar dateCellRender={dateCellRender} />
, mountNode);

我的探索代码。从日期选择器中选择第3个时，将在每月的每一天显示“测试”。

  testDate = () => {
    console.log("in testDate", moment.date()); 
    if (moment.date() === 3) { 
      return "foo";
  };

  render() {
    return <Calendar dateCellRender={this.testDate} />
  }

我希望'foo'会在moment.date（）=== 3时显示在每个月的第三天，但是会在每个日期显示。

没有错误消息。

在特定的日历日期呈现数据

0 个答案: