在材质UI中动态更改选项卡内容

Question

我在我的反应应用程序页面中有一个包含选项卡（材质ui）的div。它有两个选项卡。其中一个标签有listview（material-ui）。我想要一个行为，当我点击列表视图的任何列表项时，我的标签内容应该淡出（或隐藏或更改）列表视图，并给我的标签另一个视图。我怎么能做到这一点。

return (
      <MuiThemeProvider> 
       <div className="videoPageTabs"> 
        <Tabs> 
         <Tab label="Tags" style={{backgroundColor:"#293C8E"}}> 
          <TagList/> 
         </Tab> 

listItems中组分 “标记表”

return (
      <div> 
       <List id="parent-list-tags" > 
        <ListItem primaryText="Item 1" onClick={this.handleClicked} /> 
        <Divider/> 
        <ListItem primaryText="Item 2" onClick={this.handleClicked} /> 
        <Divider/> 
        <ListItem primaryText="Item 3" onClick={this.handleClicked} /> 
        <Divider/> 
        <ListItem primaryText="Item 4" onClick={this.handleClicked}/> 
        <Divider/> 
        <ListItem primaryText="Item 5" onClick={this.handleClicked}/> 
        <Divider/> 
        <ListItem primaryText="Item 6" onClick={this.handleClicked} /> 
       </List> 

      </div> 

“标签元件”。 您可以看到我正将Taglist作为标签“标签”的视图。无论何时单击listitem，我都希望此视图发生更改。我想在任何列表项被点击时用另一个组件“组件A”代替“Taglist” 组件。

return (
      <MuiThemeProvider> 
       <div className="videoPageTabs"> 
        <Tabs> 
         <Tab label="Tags" style={{backgroundColor:"#293C8E"}}> 
          <TagList/> 
         </Tab> 
         <Tab label="Info" style={{backgroundColor:"#293C8E"}}> 
          <div> 
           <h3 style={styles.headline}>Title : Name</h3> 


          </div> 
         </Tab> 
        </Tabs> 

       </div> 
      </MuiThemeProvider> 

     ); 

我想用另一个组件替换它，每次点击一个列表项。路由器在这里很有用。

Answer 1

标签有一个道具和价值

value={this.state.value} 
onChange={this.handleChange} 

所以你需要的值分配给所有标签页：

<Tab label="Tags" value="tags" > 

，然后你handlechange函数将只需切换到任何你想要的标签。

Answer 2

您可能需要从material-ui网站读取