Javascript 自动完成popover中的材质UI选项卡

是否可以以选项卡的形式在自动完成弹出窗口中呈现匹配的数据？我可能有多达三类与输入值匹配的数据，我想显示为选项卡。我是否可以组合“材质UI自动完成”和“选项卡”组件来实现此功能？

自动完成组件为建议的项目创建一个菜单组件。因此，每个建议都是MenuItem类型的一个组件

MenuItem组件可以有动态子项，因此可以添加选项卡作为MenuItem的子项。问题是，在建议弹出框内的任何单击都会关闭弹出框

如果您想尝试一下，或者以某种方式破解它（比如防止通过隧道传输到popover的单击事件，并手动处理打开状态（？），下面是复制代码（开始在输入中键入“test”一词以查看建议）：

从“React”导入React；
从“物料界面/自动完成”导入自动完成；
从“物料界面/选项卡”导入{Tabs，Tab}；
从“物料界面/菜单项”导入菜单项；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“材质ui/样式/颜色”导入{deepOrange500}；
常量muiTheme=getMuiTheme({
调色板：{
Accent1颜色：深橙色500，
},
});
导出默认类AutoCompleteExampleSimple扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据源：[]，
};
}
getTabs（）{
返回
表一

这是一个示例选项卡。


您可以在这里放置任何类型的HTML或react组件。它甚至可以保持组件状态！

表二

这是另一个示例选项卡。

表三

这是第三个示例选项卡。

}
handleUpdateInput（值）{
这是我的国家({
数据源：[
{text:'test'，值：this.getTabs（）}
],
});
};
render（）{
返回(
);
}
}

自动完成组件为建议的项目创建菜单组件。因此，每个建议都是MenuItem类型的一个组件

MenuItem组件可以有动态子项，因此可以添加选项卡作为MenuItem的子项。问题是，在建议弹出框内的任何单击都会关闭弹出框

如果您想尝试一下，或者以某种方式破解它（比如防止通过隧道传输到popover的单击事件，并手动处理打开状态（？），下面是复制代码（开始在输入中键入“test”一词以查看建议）：

从“React”导入React；
从“物料界面/自动完成”导入自动完成；
从“物料界面/选项卡”导入{Tabs，Tab}；
从“物料界面/菜单项”导入菜单项；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“材质ui/样式/颜色”导入{deepOrange500}；
常量muiTheme=getMuiTheme({
调色板：{
Accent1颜色：深橙色500，
},
});
导出默认类AutoCompleteExampleSimple扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据源：[]，
};
}
getTabs（）{
返回
表一

这是一个示例选项卡。


您可以在这里放置任何类型的HTML或react组件。它甚至可以保持组件状态！

表二

这是另一个示例选项卡。

表三

这是第三个示例选项卡。

}
handleUpdateInput（值）{
这是我的国家({
数据源：[
{text:'test'，值：this.getTabs（）}
],
});
};
render（）{
返回(
);
}
}

import React from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import {Tabs, Tab} from 'material-ui/Tabs';
import MenuItem from 'material-ui/MenuItem';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {deepOrange500} from 'material-ui/styles/colors';

const muiTheme = getMuiTheme({
  palette: {
    accent1Color: deepOrange500,
  },
});

export default class AutoCompleteExampleSimple extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
    };
  }

  getTabs() {
   return <MenuItem>
            <Tabs>
              <Tab label="Item One" >
                <div>
                  <h2>Tab One</h2>
                  <p>
                    This is an example tab.
                  </p>
                  <p>
                    You can put any sort of HTML or react component in here. It even keeps the component state!
                  </p>
                </div>
              </Tab>
              <Tab label="Item Two" >
                  <div>
                    <h2>Tab Two</h2>
                    <p>
                      This is another example tab.
                    </p>
                  </div>
              </Tab>
              <Tab
                label="onActive"
                route="/home">
                <div>
                  <h2 >Tab Three</h2>
                  <p>
                    This is a third example tab.
                  </p>
                </div>
              </Tab>
            </Tabs>
          </MenuItem>
  }

  handleUpdateInput(value) {
    this.setState({
      dataSource: [
        {text: 'test', value: this.getTabs()}
      ],
    });
  };

  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
          <AutoComplete
            hintText="Type anything"
            dataSource={this.state.dataSource}
            onUpdateInput={this.handleUpdateInput.bind(this)}
          />
        </div>
      </MuiThemeProvider>
    );
  }
}