재질 UI 탭 - 활성 - 활성 탭 onclick 변경

Question

프로젝트에 반응하는 탭 구성 요소가 있습니다.

두 개의 탭이 있습니다. 탭 1 및 탭 2. 사용자가 탭 1의 포함을 클릭하여 활성 탭을 탭 1에서 탭 2로 변경하려는 경우를 선택합니다.

예 :

두 개의 탭 Tab1과 Tab2가 있습니다. Tab1에는 test1과 test2가 포함되어 있습니다. Tab2에는 test3과 test4가 있습니다.

사용자가 test1 (Tab1 포함)을 클릭하면 활성 탭을 Tab1에서 Tab2로 변경하려고합니다.

어떻게 처리 할 수 ​​있습니까?

Answer 1

저는 material-ui 문서에서 Basic Tabs 예제를 사용하고 예제에서 설명하는 것을 수행하도록 수정했습니다.

원래의 기본 탭 예제에서 코드는 속성을 this.state에 설정하여 사용중인 탭을 추적합니다. 탭 하나의 항목을 클릭 할 때 탭을 전환하려면 탭 1 안에 무언가가 클릭되면 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);