React-ボタンをクリックしている間、次のタブをアクティブにする

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