Reactjs - вкладку указатель сброса на действие изменения в материал-интерфейс

Я использую Tabs из material-ui. Вкладка swipe-able открывается на onTouchTap, она работает нормально, но индекс tab не сбрасывается на 0 при новом действии, он показывает последний индекс вкладки, а не tab с индексом 0. Я попытался создать функцию, чтобы изменить состояние на 0, но она говорит, что состояние не может быть изменено внутри render. Пожалуйста, помогите, я новичок в Reactjs.

class ModelDetail extends Component {

  constructor(props) {
    super(props);
    this.state = {
      slideIndex: 0,
    };
  }

  handleChange (value) {
    this.setState({
      slideIndex: value,
    });
  };

  render() {
    return (
      <div>
        <Tabs onChange={this.handleChange.bind(this)} value={this.state.slideIndex}>
          <Tab label="Input Parameters" value={0} style={styles.heading} />
          <Tab label="Benchmark Output" value={1} style={styles.heading} />
          <Tab label="Output Figures" value={2} style={styles.heading} />
        </Tabs>
        <SwipeableViews index={this.state.slideIndex}  onChangeIndex={this.handleChange.bind(this)}>
          ...
          ...
        </SwipeableViews>
      </div>
    )}
2 2
reactjs material-ui

2 ответа:

Я попытался создать функцию, чтобы изменить состояние на 0, но ее слова что состояние не может быть изменено внутри рендера.

Каждый раз, когда вы изменяете состояние, компонент рендерится, если вы безусловно обновите состояние в рендере, это создаст бесконечный цикл рендеринга компонента. Так что, очевидно, вы не можете этого сделать.

Если вы хотите изменить состояние, добавьте обработчик событий и измените состояние при наступлении события.

0

Внутренне material-ui использует react-swipeable-views поэтому вместо вызова пользовательского обработчика событий лучше использовать метод библиотеки с именем onSwitching вы можете прочитать всю документацию здесь

Https://github.com/oliviertassinari/react-swipeable-views

Например 

        <SwipeableViews
          index={index}
          onChangeIndex={ onTabChange }
          onSwitching = { this.onSwipe }
        >
          {views}
        </SwipeableViews>
0