如何使用React Material UI在图标菜单中以编程方式打开对话框？

Question

我有一个图标菜单，并且有一个数组，当我打开图标菜单时，该数组保存可能的值。 例如，

listItems = {
    [
        {
            label: 'ZERO',
            type: 'positive',
            value: 0,
        },
        {
            label: 'ONE',
            type: 'danger',
            value: '1',
        },
        {
            label: 'TWO',
            type: 'warning',
            value: '2',
        },
        {
            label: 'THREE',
            type: 'default',
            value: '3',
        }
    ]
}

当我将初始值设置为1时，菜单中将显示标签ONE。 基于所选的值，我想显示一个对话框（ http://www.material-ui.com/#/components/dialog ）。 因此，当用户从菜单中选择“一个”时，我希望打开对话框。 在对话框中，按下对话框上的“确定”按钮后，几个输入文本字段将捕获一些输入。 通常，对话框是在典型Button的onClick或onChange方法下触发的。 就我而言，我想触发所选菜单选项下的对话框。 我的代码如下：

onItemSelection = {(value) => {
    if (value === 1) {
      console.log(`${value} is clicked`);
      //Trigger the Dialog here
      <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={this.handleOpen}
      >
      </Dialog>

我的handleOpen方法如下，

handleOpen = () => {
    this.setState({open: true});
};

但是，到目前为止，选择该选项后，仅会打印控制台语句，而不会打开对话框。 如何解决这个问题？

Answer 1

这里有些错误的地方

首先：在onItemSelection函数中，您有一个不正确的Dialog ，因为您需要渲染该对话框

第二： Dialog的open this.handleOpen需要一个bool值，您要提供的是this.handleOpen函数this.handleOpen

您可以正确地将其写为

handleOpen = () => {
   this.setState({open: true});
};

onItemSelection={(value) => {
        if (value === 1) {
           console.log(`${value} is clicked`);
           //Trigger the Dialog here
           this.handleOpen();
        }
}

render() {
    return (
        <Dialog
            title="Dialog With Actions"
            actions={actions}
            modal={false}
            open={this.state.open}
          >
          </Dialog>
    )
}

很显然，您还需要一种关闭对话框的方法，可以通过将state变量open设置为false来完成。