React-单击按钮时激活下一个标签 [英] React- Active next tab while clicking button

问题描述

我的页面上有4个标签.每个标签包含不同的数据.

I have 4 tabs on my page. each tab contain different data.

我在第一个标签内有一个按钮，基本上是想激活下一个标签以在用户单击该按钮时显示内容.

i have button inside first tab, basically want to active next tab to show content when user clicks on that button.

     render(){
         return (
        <MuiThemeProvider>
            <div className="background">
                <Header/>
                <div>
                    <Card>
                        <Tabs>
                            <Tab label="General">
                                <div>
                                    <button>Normal button</button> 
     // when user clicks on this button description tab should be active
                                </div>
                            </Tab>
                            <Tab label="Descriptions">
                                <Description />
                            </Tab>

                            <Tab label="Content">
                                <Content />
                            </Tab>

                            <Tab label="Sidebar">
                                  <Sidebar/>
                            </Tab>
                        </Tabs>
                    </Card>
                </div>
            </div>
        </MuiThemeProvider>
    )
}

我该怎么做?

推荐答案

这就是您要做的-使用受控标签.分配一个状态值，该值确定当前哪个标签页处于打开状态，然后单击按钮以激活下一个标签页.

Here's what you have to do - use controlled tabs. Assign a state value which determines which tab is open at a current time and use the click on the button to activate the next tab.

//The currentTab variable holds the currently active tab
constructor(props) {
    super(props);
    this.state = {
      currentTab: 'a',
    };
 }

handleChange = (value) => {
    this.setState({
      currentTab: value,
    });
 };

render(){
         return (
        <MuiThemeProvider>
            <div className="background">
                <Header/>
                <div>
                    <Card>
                        <Tabs 
                          value={this.state.currentTab}
                          onChange={this.handleChange}
                         >
                            <Tab label="General" value="a">
                                <div>
                                    //Sets the currentTab value to "b" which corresponds to the description tab 
                                    <button onClick={()=>this.handleChange("b")}>Normal button</button> 
                                </div>
                            </Tab>
                            <Tab label="Descriptions" value="b">
                                <Description />
                            </Tab>
                            <Tab label="Content" value="c">
                                <Content />
                            </Tab>
                            <Tab label="Sidebar" value="d">
                                <Sidebar/>
                            </Tab>
                        </Tabs>
                    </Card>
                </div>
            </div>
        </MuiThemeProvider>
    )
}

这篇关于React-单击按钮时激活下一个标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！