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

Question

是否可以将自动完成弹窗中的匹配数据以Tabs的形式呈现？我最多可能有三类与输入值匹配的数据，我想将它们显示为选项卡。我可以结合使用 Material-UI 自动完成和制表符组件来实现吗？

Answer 1

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

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

如果你想尝试一下，或者想以某种方式破解它（比如防止点击事件隧道到弹出窗口，并手动处理打开状态（？）），这里是复制代码（开始输入单词"test"在input里看建议：

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

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

Material-UI Tabs inside AutoComplete popover

html

javascript

reactjs

material-ui