mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
1.2 KiB
1.2 KiB
切换到下一步
- 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);