ant-design/components/steps/demo/step-next.md

切换到下一步

• order: 3

随机生成 3~6 个步骤，初始随机进行到其中一个步骤。

---

#components-steps-demo-step-next > div > div {
  margin-bottom: 30px;
}

var Steps = antd.Steps;
var Step = Steps.Step;
var container = document.getElementById('components-steps-demo-step-next');
var array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
var steps = array.map(function(item, i) {
  return {
    title: '步骤' + (i + 1)
  };
});

var App = React.createClass({
  getInitialState() {
    return {
      currentStep: Math.floor(Math.random() * steps.length)
    }
  },
  next() {
    var s = this.state.currentStep + 1;
    if (s === steps.length) {
      s = 0;
    }
    this.setState({
      currentStep: s
    });
  },
  render() {
    var cs = this.state.currentStep;
    return (
      <div>
        <div>当前正在执行第 {cs + 1} 步</div>
        <Steps current={cs}>
          {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
        </Steps>
        <div>
          <button className='ant-btn' onClick={this.next}>下一步</button>
        </div>
      </div>
    );
  }
});

React.render(<App />, container);