如何使用 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）。因此，当用户从菜单中选择 ONE 时，我希望打开对话框。在我的对话框中，按下对话框上的 OK 按钮后，很少有输入文本字段会捕获一些输入。 通常，对话框是在典型 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 属性需要一个 bool 值，而您提供给它的是一个函数 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 来完成。