javascript - 单击插槽时在反应大日历中显示预订模式并将预订按钮保留在空插槽中

Question

当我单击空插槽时，我试图在反应大日历中实现模态。我的默认视图是week。这是我的代码。

constructor(props) {
    super(props);
    this.state = {
        events: [
            {
                id: 1,
                start: new Date(moment().add(-1, "days")),
                end: new Date(),
                title: "Learn Laravel"
            },
            {
                id: 2,
                start: new Date(),
                end: new Date(moment().add(-3, "days")),
                title: "Learn PHP"
            },
            {
                id: 3,
                start: new Date(),
                end: new Date(moment().add(-2, "days")),
                title: "Learn Database"
            }
        ]
    };
}

slotSelected(slotInfo) {
    console.log(slotInfo);
    **I want pop-up/modal here **

}

eventSelected(eventInfo) {
    console.log(eventInfo);
}

render() {

    return <MyCalendar allEvents={this.state.events} eventSelected={this.eventSelected}
                       slotSelected={this.slotSelected}/>
}


<div id="mycalendar" style={calendarStyle}>
    <Calendar
        defaultDate={new Date()}
        defaultView="week"
        events={props.allEvents}
        style={{height: "50vh", width: "60vh"}}
        selectable={true}
        onSelectSlot={props.slotSelected}
        onSelectEvent={props.eventSelected}
    />

</div>

现在，我希望在单击空插槽时显示模态。如果可能的话，我想在插槽中创建一个书本按钮。我在我的应用程序中使用引导模式。我需要这方面的帮助。代码中有我想要模态的注释。谢谢