Material UI 为 React js 项目提供的选项卡中的导航问题

Question

我在我的项目中使用 React Js 和 Material UI Tabs 组件在 2 个组件之间导航。

当我通过单击转到选项卡 2 或选项卡 1 时，我的组件会呈现并且路径会更改，但选项卡指示器不会在活动选项卡上更新。

我已经尝试更新按钮单击时的状态，但它不起作用

class NavBars extends React.Component {
  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    this.setState({ value });
    console.log(this);
  };

  navigateToTab2 = () => {
    this.setState({ value: 1 });
    console.log(this.state);
    this.props.history.push('/tab2');
  }

  navigateToTab1 = (facility, event) => {
    this.setState({ value: 0 });
    console.log(this.state);
    this.props.history.push('/tab1', {
      facilityId: facility.facilityId,
      facilityName: facility.facilityName,
    });
  }

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

    return (
      <div className={classes.root}>
        <Tabs
          value={value}
          onChange={this.handleChange}
          classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
        >
          <Tab
            disableRipple
            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
            label="Tab 1"
            onClick={this.navigateToTab1}
          />
          <Tab
            disableRipple
            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
            label="Tab 2"
            onClick={this.navigateToTab2}
          />
        </Tabs>
      </div>
    );
  }
}

我希望当我单击 Tab1 时，它应该转到 Tab1 并在 Tab 1 上呈现带有 Tab 指示器的组件，当我单击 Tab 2 时，它应该转到 Tab 2 并呈现带有 Tab 指示器的 Tab 2 组件标签 2

Answer 1

几件事：

为每个Tab 设置onClick 事件确实没有意义，因为您需要做的所有事情都可以在Tabs 的onChange 处理程序中完成。

因此，当onChange 被触发时，您可以设置选定的选项卡值，然后调用this.props.history.push。确保您根据所选的选项卡呈现您的子组件。

如果你想让路由/tab2自动选择tab2，那么你需要检查componentDidMount()中的当前路由，然后相应地设置状态。例如，如果route == '/tab2' then state.value == 2

这是一个直接取自 Material-UI 文档的示例。

<div className={classes.root}>
  <AppBar position="static">
    <Tabs value={value} onChange={this.handleChange}>
      <Tab label="Item One" />
      <Tab label="Item Two" />
      <Tab label="Item Three" />
    </Tabs>
  </AppBar>
  {value === 0 && <TabContainer>Item One</TabContainer>}
  {value === 1 && <TabContainer>Item Two</TabContainer>}
  {value === 2 && <TabContainer>Item Three</TabContainer>}
</div>

您的组件最终应该看起来像这样

class NavBars extends React {
  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    if (value == 0) {this.props.history.push('/tab1')}
    if(value == 1) {this.props.history.push('/tab2')}
  };

  componentDidMount() {
    if(this.props.location.pathname == '/tab1') {
      this.setState({value: 0})
    } else {
      this.setState({value: 1})
    }

  }

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

    return (
      <div className={classes.root}>
        <Tabs
          value={value}
          onChange={this.handleChange}
          classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
        >
          <Tab
            disableRipple
            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
            label="Tab 1"
          />
          <Tab
            disableRipple
            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
            label="Tab 2"
          />
        </Tabs>

        {value == 0 && <p>Here is tab 1 content</p>}
        {value == 1 && <p>Here is tab 2 content</p>}

      </div>
    );
  }
}