mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

docs(steps): step next change to hooks (#27564)

Browse Source
This commit is contained in:
Tom Xu 2020-11-05 13:26:20 +08:00 committed by GitHub
parent 9d056c1508
commit edb39437f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
components/steps/demo/step-next.md
View File

@ -33,55 +33,45 @@ const steps = [
},
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
};
}
const App = () => {
const [current, setCurrent] = React.useState(0);
next() {
const current = this.state.current + 1;
this.setState({ current });
}
const next = () => {
setCurrent(current + 1);
};
prev() {
const current = this.state.current - 1;
this.setState({ current });
}
const prev = () => {
setCurrent(current - 1);
};
render() {
const { current } = this.state;
return (
<>
<Steps current={current}>
{steps.map(item => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<div className="steps-content">{steps[current].content}</div>
<div className="steps-action">
{current < steps.length - 1 && (
<Button type="primary" onClick={() => this.next()}>
Next
</Button>
)}
{current === steps.length - 1 && (
<Button type="primary" onClick={() => message.success('Processing complete!')}>
Done
</Button>
)}
{current > 0 && (
<Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
Previous
</Button>
)}
</div>
</>
);
}
}
return (
<>
<Steps current={current}>
{steps.map(item => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<div className="steps-content">{steps[current].content}</div>
<div className="steps-action">
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
Next
</Button>
)}
{current === steps.length - 1 && (
<Button type="primary" onClick={() => message.success('Processing complete!')}>
Done
</Button>
)}
{current > 0 && (
<Button style={{ margin: '0 8px' }} onClick={() => prev()}>
Previous
</Button>
)}
</div>
</>
);
};
ReactDOM.render(<App />, mountNode);
```