材质 UI 选项卡 - 反应 - 更改活动选项卡 onclick

Question

我在反应项目中有选项卡组件。

我有 2 个标签。选项卡 1 和选项卡 2。当用户单击选项卡 1 的包含以选择我想将活动选项卡从选项卡 1 更改为选项卡 2 时。

例如。

我有两个选项卡 Tab1 和 Tab2。Tab1 包含 test1 和 test 2。Tab2 包含 test3 和 test4。

当用户单击 test1 （Tab1 的包含）时，我想将活动选项卡从 Tab1 更改为 Tab2。

我该怎么做。

Answer 1

I've taken the Basic Tabs example from the material-ui doc and adapted it to do what you describe in your example.

Notice that in the original Basic Tabs example, the code tracks which tab is active using by setting a value property in this.state. In order to switch tabs when an item inside Tab One is clicked, all you need to do is update the value property when something is clicked inside Tab One. I indicated with a comment where that happens below.

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