AutoCompleteポップオーバー内のマテリアルUIタブ

Question

タブの形式でオートコンプリートポップオーバーの一致データをレンダリングすることは可能ですか？入力値と一致する3つのカテゴリのデータをタブとして表示することができます。マテリアルUIのオートコンプリートとタブコンポーネントを組み合わせてこれを実現できますか？

Answer 1

オートコンプリートコンポーネントは、提案されたアイテムのメニューコンポーネントを作成します。したがって、それぞれの提案はMenuItem型のコンポーネントです。

MenuItemコンポーネントには動的な子が含まれる可能性があるため、MenuItemの子としてタブを追加できます。 問題は、提案のポップオーバー内のクリックがすべてポップオーバーを閉じることです。

これを試したり、何かをハックする（ポップオーバーにトンネリングするためのクリックイベントを防止したり、手動でオープン状態を処理するなど）場合は、ここで再生コードを入力します（単語 "テスト中 "を入力してください）。

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