Как открыть диалог с функцией в реакции?

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.

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