マテリアルUIタブ - アクティブ - アクティブなアクティブなonclickを変更する

Question

私は反応プロジェクトにタブコンポーネントを持っています。

私は2つのタブを持っています。タブ1とタブ2を選択すると、タブ1の包含タブをクリックして、アクティブなタブをタブ1からタブ2に変更したいと選択します。

例：

私は2つのタブTab1とTab2を持っています。 Tab1にはtest1とtest2が含まれています。Tab2にはtest3とtest4が含まれています。

ユーザーがtest1（Tab1の含む）をクリックすると、アクティブなタブをTab1からTab2に変更したいと思います。

どうすればいいですか？

Answer 1

私はmaterial-uiの文書からBasic Tabsの例を取り上げて、あなたの例で説明することを行うようにしました。

元の基本タブの例では、コードはvalueプロパティをthis.stateに設定して、どのタブがアクティブであるかを追跡します。 Tab One内のアイテムがクリックされたときにタブを切り替えるには、Tab One内で何かがクリックされたときにvalueプロパティを更新するだけです。私は以下のところでそれがどこで起こるかをコメントで示しました。

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { withStyles } from 'material-ui/styles'; 
import AppBar from 'material-ui/AppBar'; 
import Tabs, { Tab } from 'material-ui/Tabs'; 
import Typography from 'material-ui/Typography'; 

function TabContainer(props) { 
    return (
    <Typography {...props} component="div" style={{ padding: 8 * 3 }}> 
     {props.children} 
    </Typography> 
); 
} 

TabContainer.propTypes = { 
    children: PropTypes.node.isRequired, 
}; 

const styles = theme => ({ 
    root: { 
    flexGrow: 1, 
    marginTop: theme.spacing.unit * 3, 
    backgroundColor: theme.palette.background.paper, 
    }, 
}); 

class BasicTabs extends React.Component { 
    state = { 
    activeTabIndex: 0, 
    }; 

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

    render() { 
    const { classes } = this.props; 
    const { activeTabIndex } = this.state; 

    return (
     <div className={classes.root}> 
     <AppBar position="static"> 
      <Tabs value={activeTabIndex} onChange={this.handleChange}> 
      <Tab label="Tab One" /> 
      <Tab label="Tab Two" /> 
      </Tabs> 
     </AppBar> 
     { 
      activeTabIndex === 0 && 
      // When the user clicks on Test One or Test Two, update the state 
      // to display Tab 2 
      <div onClick={() => this.setState({ activeTabIndex: 1 })}> 
      <TabContainer > 
       Test One 
      </TabContainer> 
      <TabContainer> 
       Test Two 
      </TabContainer> 
      </div> 
     } 
     { 
      activeTabIndex === 1 && 
      <div> 
      <TabContainer> 
       Test Three 
      </TabContainer> 
      <TabContainer> 
       Test Four 
      </TabContainer> 
      </div> 
     } 
     </div> 
    ); 
    } 
} 

BasicTabs.propTypes = { 
    classes: PropTypes.object.isRequired, 
}; 

export default withStyles(styles)(BasicTabs);