Question

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

当我通过单击转到选项卡2或选项卡1时，将渲染我的组件并且更改路线，但是在活动选项卡上选项卡指示符未得到更新。

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

class NavBars extends React {
  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>
    );
  }
}

I expect that when I click on Tab1 it should go to Tab1 and render that component with Tab indicator be on Tab 1 and when I click on Tab 2 it should go to Tab 2 and render the Tab 2 component with tab indicator on tab 2[enter image description here][1]


  [1]: https://i.stack.imgur.com/YRaqs.png

Answer 1

几件事：

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

因此，在触发Tabs时，可以设置选定的选项卡值，然后调用onChange。确保根据所选选项卡呈现子组件。

如果您希望路由this.props.history.push自动选择tab2，则需要检查/tab2中的当前路由，然后相应地设置状态。例如，如果componentDidMount()

这是直接从Material-UI文档中获取的示例。

route == '/tab2' then state.value == 2

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

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

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

1 个答案: