Question

我在循环中实现了对话框，所以如何防止从循环中打开对话框。因为当我打开模式弹出窗口时，它将同时打开多个弹出窗口。

handleClickOpen = name => event => {
    this.setState({
      open: true
    });
};

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

{Developertasklist.map((task, index) => {
    return (
        <div className={classes.width5}>
            <NotesIcon
              className={classes.icon}
              onClick={this.handleClickOpen()}
            />
            <Dialog
              onClose={this.handleClose}
              aria-labelledby="customized-dialog-title"
              open={this.state.open}
            >
              <DialogTitle
                id="customized-dialog-title"
                onClose={this.handleClose}
              >
                Notes
              </DialogTitle>
              <DialogContent>
                <Note />
              </DialogContent>
            </Dialog>
        </div>
    )
})}

如何防止循环弹出窗口。

谢谢。

Answer 1

问题是您对所有任务使用相同的状态，您可以将openTask设置为state并发送open = this.state.openTask === task，以便仅打开一个任务对话框。

  handleClickOpen = task => event => {
        this.setState({
          openTask: task
        });
    };

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

    {Developertasklist.map((task, index) => {
        return (
            <div className={classes.width5}>
                <NotesIcon
                  className={classes.icon}
                  onClick={this.handleClickOpen(taks)}
                />
                <Dialog
                  onClose={this.handleClose}
                  aria-labelledby="customized-dialog-title"
                  open={this.state.openTask === task }
                >
                  <DialogTitle
                    id="customized-dialog-title"
                    onClose={this.handleClose}
                  >
                    Notes
                  </DialogTitle>
                  <DialogContent>
                    <Note />
                  </DialogContent>
                </Dialog>
            </div>
        )
    })}

防止在循环中打开对话框模态

1 个答案: