如何在 React Big Calendar 中获取选定的事件？答案

【问题标题】：How to get selected event in React Big Calendar?如何在 React Big Calendar 中获取选定的事件？
【发布时间】：2019-04-17 23:09:59
【问题描述】：

<BigCalendar
    events={dummyEvents}
    onSelectEvent={event => alert(event)}
    eventPropGetter={eventStyleGetter}
/>

在BigCalendar上显示事件后，我想知道选择了哪个事件。但是这个 sn-p 只显示一个空字符串？

如何在 React Big Calendar 中获取选中的事件？

【问题讨论】：

你能创建一个可重现的例子吗？另外，使用console.log over alert
是的，console.log 有效。

标签： javascript reactjs react-big-calendar

【解决方案1】：

您正在尝试alert() 一个对象。 onSelectEvent 方法获取您单击{start, end, allDay, ...rest} 的完整event，其中start 和end 都应该是真正的JS Date 对象。而且，由于您包含了onSelectEvent，您现在必须在您的日历上控制selected。

const [selected, setSelected] = useState();

const handleSelected = (event) => {
  setSelected(event);
  console.info('[handleSelected - event]', event);
};
<Calendar
  selected={selected}
  onSelectEvent={handleSelected}
  {...otherProps}
/>

重要提示：selected 必须是对 events 数组中对象的引用。发送到onSelectEvent 的event 是参考，而不是副本。如果您稍后更改您的状态值，而不更新您的 events 数组，那么 RBC 将不会显示这些更改。

【讨论】：