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

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})
}

并且在 Scheduler 组件中

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

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

How to open dialog from a function in react?

dialog

scheduler

reactjs

material-ui

react-props