Reactjs-重置物料界面中操作更改的选项卡索引

我正在使用

材料界面

的

选项卡

。可滑动选项卡在触摸屏上打开，工作正常，但在新操作中，

选项卡

索引未重置为

0

，它显示最后一个选项卡索引，而不是索引为

0

的

选项卡

。我试图创建一个函数来将状态更改为0，但它表示无法在render中更改状态。请帮忙，我是新手

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

类ModelDetail扩展组件{
建造师（道具）{
超级（道具）；
此.state={
幻灯片索引：0，
};
}
handleChange（值）{
这是我的国家({
幻灯片索引：值，
});
};
render（）{
返回(
...
...
)}

我试图创建一个函数来将状态更改为0，但是 无法在渲染内部更改状态

每次更改状态时，组件渲染，如果在渲染中无条件更新状态，它将创建组件渲染的infinte循环。因此，显然不能这样做

---

如果您希望更改状态，请添加事件处理程序并在事件发生时更改状态。

内部材质ui使用react swipeable视图，因此，与其调用自定义事件处理程序，不如使用名为

onSwitching的库方法

您可以在这里阅读整个文档

比如说

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

{views}

谢谢。我正要这么做。@Jeril如果你认为这能解决你的问题，请接受答案：）这正是我想要的。我做了很多努力，但没有成功，但最终我找到了，所有的事情都完成了，谢谢