AutoComplete彈出窗口中的材質UI選項卡

Question

是否可以使用Tabs形式呈現AutoComplete彈出窗口中的匹配數據？我可能有三類與輸入值匹配的數據，我希望顯示爲製表符。我可以結合Material-UI AutoComplete和Tabs組件來實現這一點嗎？

Answer 1

AutoComplete組件爲建議的項目創建一個Menu組件。所以每個建議都是MenuItem類型的一個組件。

MenuItem組件可以具有動態子項，因此您可以添加一個選項卡作爲MenuItem的子項。 問題是建議彈出窗口內的任何點擊都會關閉彈窗窗口。如果你想嘗試一下，或者可能會以某種方式破解它（比如阻止點擊事件來挖掘popover，並手動處理打開狀態（？）），這裏是複製代碼（開始鍵入單詞「測試「在輸入看到建議）：

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