React中FullCalendar传递数据及在handleDateClick获取post_id方法

算力阿峰

2026-5-9

解决FullCalendar点击日期获取post_id的问题

嘿，我来帮你搞定这个问题～

首先得明确：dateClick事件触发的是日期单元格的点击，而不是点击具体的事件条目，所以它的info对象里不会自动带上你自定义的post_id数据。要拿到对应日期的post_id，我们需要自己根据点击的日期去匹配你state里的events数组。

下面是修改后的代码，我会标注关键改动：

constructor(props){
  super(props)
  this.state = {
    events:[
      { "date": "2020-10-19", "data": { post_id: 5 } },
      { "date": "2020-10-20", "data": { post_id: 6 } }
    ]
  }
}

handleDateClick = (info) => {
  info.jsEvent.preventDefault();
  // 获取点击的日期，格式和你events里的date一致（YYYY-MM-DD）
  const clickedDate = info.dateStr;
  // 在events数组中查找匹配该日期的条目
  const matchedEvent = this.state.events.find(event => event.date === clickedDate);
  
  if (matchedEvent) {
    const postId = matchedEvent.data.post_id;
    console.log("找到对应的post_id：", postId);
    // 这里可以添加你需要的后续逻辑，比如跳转帖子详情页等
  } else {
    console.log("这个日期没有对应的帖子哦");
  }
}

render(){
  // 注意这里要改成this.state.events，不然会找不到events变量
  const { events } = this.state;
  return(
    <FullCalendar
      plugins={[ dayGridPlugin, interactionPlugin ]}
      initialView="dayGridMonth"
      dateClick={this.handleDateClick}
      eventContent={this.renderEventContent}
      events={events}
      height={550}
    />
  )
}

关键说明：

info.dateStr直接返回YYYY-MM-DD格式的字符串，刚好和你events里的date格式匹配，不用额外转换日期格式。
如果你的场景中一个日期可能对应多个帖子，把find换成filter就能拿到所有匹配的事件数组，再遍历取出每个post_id即可。
修复了render里的小问题：原代码中events={events}会报错，因为没有定义局部变量events，改成从state解构出来就没问题了。