Question

我当前正在使用此code创建我的调度程序应用程序。

现在这是我的代码-Scheduler.js

class CalendarScheduler extends Component {
state = {
    viewModel: schedulerData,
    showBookingDialog: true,
}

handleClickOpen = () => {
    this.setState( (prevState) => {
        return {showBookingDialog : !prevState.showBookingDialog};
    } )
};

handleClose = () => {
    this.setState({ showBookingDialog: false });
};

render() {
    const { viewModel } = this.state;

    let schedulerData = this.state.viewModel;
    schedulerData.setResources(this.props.rooms);

    return (
        <div>
            <Scheduler schedulerData={viewModel}
                prevClick={this.prevClick}
                nextClick={this.nextClick}
                onSelectDate={this.onSelectDate}
                newEvent={this.newEvent}
            />
        </div>
    )
}

在Scheduler.js中，我有一个用于newEvent的函数：

newEvent = (schedulerData, slotId, slotName, start, end, type, item) => {
    return(
        <BookingDialog 
            open={this.state.showBookingDialog}
            onClose={this.handleClose}
            />
    );
}

我的问题是为什么当我单击计划程序创建一个新事件时，它没有打开我的BookingDialog？

先前的newEvent函数使用window.confirm，可以在第93行的here中找到。

Answer 1

您可以在Scheduler组件中设置一个状态变量以显示BookingDialog，然后在newEvent函数中将该状态变量设置为'true'。然后在Scheduler组件中基于此状态变量查看BookingDialog。

newEvent = (schedulerData, slotId, slotName, start, end, type, item) => {
this.setState({showBookingDialog:true})
}

和“计划程序”组件中

{this.state.showBookingDialog && <BookingDialog 
        open={this.state.showBookingDialog}
        onClose={this.handleClose}
        />}

如何从反应函数中打开对话框？

1 个答案: