Question

是否可以以Tabs的形式在AutoComplete弹出窗口中呈现匹配数据？我可能最多有三类与输入值匹配的数据，我想将其显示为制表符。我可以将Material-UI AutoComplete和Tabs组件结合起来实现这一目标吗？

Answer 1

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

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

如果您想尝试一下，或者可能以某种方式破解它（比如阻止点击事件进行隧道传输到弹出窗口，并手动处理打开状态（？）），这里是再现代码（开始输入单词“test”） “在输入中看到建议）：

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

AutoComplete弹出窗口中的Material-UI选项卡

1 个答案: