Reactjs

Question

我正在使用 material-ui 的 Tabs。滑动选项卡在 onTouchTap 上打开，它工作正常但 tab 索引在新操作时没有重置为 0，它显示最后一个选项卡索引，而不是 tab 与索引 0。我试图创建一个将状态更改为 0 的函数，但它说状态不能在渲染内部更改。请帮忙，我是 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>
    )}

Answer 1

I tried to create a function to change the state to 0, but its saying that the state cannot be changed inside render.

每次改变状态，组件渲染，如果你在渲染中无条件更新状态，它会创建组件渲染的无限循环。所以，你显然不能那样做。

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

Answer 2

内部 material-ui 使用 react-swipeable-views 所以与其调用自定义事件处理程序不如使用名为 onSwitching 你可以在这里阅读整个文档

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

例如

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

Reactjs - 在 material-ui 中重置选项卡索引

Reactjs - reset tab index on action change in material-ui

material-ui