反应 - 活动下一个标签，同时点击按钮

Question

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

我有第一个标签里面的按钮，基本上想要在用户点击那个按钮时激活下一个标签来显示内容。

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

我该怎么做？

Answer 1

下面是你必须做的 - 使用受控标签。为当前时间分配一个确定哪个选项卡打开的状态值，并使用单击按钮激活下一个选项卡。

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