reactjs - 如何从反应中的功能打开对话框？

Question

我目前正在使用此代码来创建我的调度程序应用程序。

这是我现在的代码 - 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 行找到。

标签： reactjsdialogmaterial-uischedulerreact-props

Answer 1

您可以在调度程序组件中设置状态变量以显示 BookingDialog，并在 newEvent 函数中将该状态变量设置为“true”。在调度程序组件中，根据此状态变量查看 BookingDialog。

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

并在调度程序组件中

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