Question

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

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

ListItems组件＆＃34; TagList＆＃34;

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>

＆＃34;标签组件＆＃34;。您可以看到我正在传递Taglist作为标签＆＃34;标签＆＃34;的视图。每当我点击listitem时，我希望这个视图发生变化。我想替换＆＃34; Taglist＆＃34; 组件与另一个组件＆＃34;组件A＆＃34;每当点击任何列表项时。

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函数会切换到你想要的任何一个标签。

在材质用户界面

1 个答案: