ant-design/components/steps/demo/step-next.md
2016-04-06 16:16:46 +08:00

57 lines
1.2 KiB
Markdown

---
order: 3
title: 切换到下一步
---
随机生成 3~6 个步骤,初始随机进行到其中一个步骤。
````css
#components-steps-demo-step-next > div > div {
margin-bottom: 30px;
}
````
````jsx
import { Steps, Button } from 'antd';
const Step = Steps.Step;
const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
const steps = array.map((item, i) => {
return {
title: `步骤${i + 1}`
};
});
const App = React.createClass({
getInitialState() {
return {
currentStep: Math.floor(Math.random() * steps.length)
};
},
next() {
let s = this.state.currentStep + 1;
if (s === steps.length) {
s = 0;
}
this.setState({
currentStep: s
});
},
render() {
const cs = this.state.currentStep;
return (
<div>
<div style={{ marginBottom: 24 }}>当前正在执行第 {cs + 1} 步</div>
<Steps current={cs}>
{steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
</Steps>
<div style={{ marginTop: 24 }}>
<Button onClick={this.next}>下一步</Button>
</div>
</div>
);
}
});
ReactDOM.render(<App />, mountNode);
````