проблема навигации во вкладках, предоставляемых пользовательским интерфейсом материалов для проекта React js

Question

Я использую React Js в своем проекте и компонент Material UI Tabs для навигации между 2 компонентами.

Когда я перехожу на вкладку 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 для Tabs.

Таким образом, когда срабатывает 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>
    );
  }
}