自动完成弹出框内的Material-UI选项卡

AutoComplete组件为建议的项目创建一个Menu组件。因此，每个建议都是MenuItem类型的组件。

MenuItem组件可以具有动态子项，因此您可以添加一个选项卡作为MenuItem的子项。该问题是，建议酥料饼内的任何点击关闭酥料饼。

如果您想尝试一下，或者以某种方式破解它（例如，防止将click事件传送到弹出窗口，并手动处理打开状态（？）），请使用复制代码（开始在“输入以查看建议）：

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