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

Question

我在 react 项目中有标签组件。

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

例如。

我有两个标签 Tab1 和 Tab2。 Tab1 包含 test1 和 test 2。Tab2 包含 test3 和 test4。

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

我该怎么做。

Answer 1

这是使用钩子的最简单的答案。

import { useState } from 'react';
..
const [tabState, setTabState] = useState(1);
...
  const handleTabs = (value) => {
    setTabState(value);
    return;
   }

let tabs_array = [<>{variable_with_contents_tab_1}</>, <>{tab_2_contents}</>];

然后在渲染中，可以提供tab ui

<Paper className={classes.root}>
      <Tabs
        value={tabState}
        onChange={(event, value) => { handleTabs(value) }} 
        indicatorColor="primary"
        textColor="primary"
        centered
      >
        <Tab value={1} label='Tab1'>
        </Tab>
        <Tab value={2} label="Tab2" />
      </Tabs>
    </Paper>
    <Paper>
        {tabs_array[tabState-1]}
    </Paper>

Answer 2

面临问题：选项卡中的 onChange 不起作用，因为我在解构 props 时忘记添加 {...other} 并影响了 material-ui 所需的 props。花了两个小时修复它=/

const Tab = ({myPersonalProps, ...other}) => {.... return <MaterialTab {...other}>}

Answer 3

我从 material-ui 文档中获取了 Basic Tabs 示例，并对其进行了调整以执行您在示例中描述的操作。

请注意，在原始基本选项卡示例中，代码通过在this.state 中设置value 属性来跟踪哪个选项卡处于活动状态。为了在单击选项卡一内的项目时切换选项卡，您需要做的就是在选项卡一内单击某项时更新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);