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

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

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

Я ожидаю, что когда я нажимаю на вкладку 1, он должен перейти на вкладку 1 и отобразить этот компонент с индикатором вкладки на вкладке 1, а когда я нажму на вкладку 2, он должен перейти на вкладку 2 и отобразить компонент вкладки 2 с индикатором вкладки на вкладке 2 < a href="https://i.stack.imgur.com/YRaqs.png" rel="nofollow noreferrer">введите описание изображения здесь


reactjs javascript setstate material-ui react-state-management
person Purvish Oza    schedule 26.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Пара вещей:

На самом деле нет смысла устанавливать onClick события для каждого Tab, потому что все, что вам нужно сделать, можно сделать в обработчике onChange для Tabs.

Таким образом, когда onChange запускается, вы можете установить выбранное значение вкладки, а затем вызвать this.props.history.push. Убедитесь, что вы визуализируете дочерние компоненты на основе выбранной вкладки.

Если вы хотите, чтобы маршрут /tab2 автоматически выбирал вкладку 2, вам необходимо проверить текущий маршрут в 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>
    );
  }
}
person Isaac Vidrine    schedule 26.03.2019
comment
Я новичок в реагировании, не могли бы вы помочь с псевдокодом для OnChangeHandler? Я хочу перейти на вкладку 1, когда я нажимаю на вкладку 1, и то же самое для вкладки 2. - person Purvish Oza; 26.03.2019