使用上一步和下一步按钮在选项卡- material-ui (版本0.18.7)之间导航

import React from 'react';
import { Tabs, Tab } from 'material-ui/Tabs';
import RaisedButton from 'material-ui/RaisedButton';
import { Step, Stepper, StepLabel } from 'material-ui/Stepper';

class NavigationTabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeStep: 0,
    };
  }

  handleNext = () => {
    const { activeStep } = this.state;
    this.setState({
      activeStep: activeStep + 1,
    });
  };

  handlePrev = () => {
    const { activeStep } = this.state;
    this.setState({
      activeStep: activeStep - 1,
    });
  };

  render() {
    const { activeStep } = this.state;

    return (
      <div>
        <Stepper activeStep={activeStep}>
          <Step>
            <StepLabel>步骤1</StepLabel>
          </Step>
          <Step>
            <StepLabel>步骤2</StepLabel>
          </Step>
          <Step>
            <StepLabel>步骤3</StepLabel>
          </Step>
        </Stepper>

        <div>
          {activeStep === 0 && (
            <div>
              <h2>步骤1 内容</h2>
              <RaisedButton label="下一步" primary onClick={this.handleNext} />
            </div>
          )}
          {activeStep === 1 && (
            <div>
              <h2>步骤2 内容</h2>
              <RaisedButton label="上一步" onClick={this.handlePrev} />
              <RaisedButton label="下一步" primary onClick={this.handleNext} />
            </div>
          )}
          {activeStep === 2 && (
            <div>
              <h2>步骤3 内容</h2>
              <RaisedButton label="上一步" onClick={this.handlePrev} />
            </div>
          )}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<NavigationTabs />, document.getElementById('root'));