首页 文章

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

提问于
浏览 次
0

我有一个图标菜单，我有一个数组，当我打开图标菜单时，它保存可能的值 . 例如，

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

但是，截至目前，选择该选项时，仅打印控制台语句但对话框未打开 . 如何解决这个问题？

javascript reactjs dialog material-ui

1 回答

  • 0

    这里有一些不正确的事情

    第一：在函数 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>
    )
}

    显然你还需要一种方法来关闭Dialog，可以通过将 state 变量 open 设置为false来完成 .

    回复于

相关问题