mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 08:09:13 +08:00
56 lines
1.2 KiB
Markdown
56 lines
1.2 KiB
Markdown
---
|
||
order: 10
|
||
title:
|
||
zh-CN: 可点击
|
||
en-US: Clickable
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
设置 `onChange` 后，Steps 变为可点击状态。
|
||
|
||
## en-US
|
||
|
||
Setting `onChange` makes Steps clickable.
|
||
|
||
```jsx
|
||
import { Steps, Divider } from 'antd';
|
||
|
||
const { Step } = Steps;
|
||
|
||
class Demo extends React.Component {
|
||
state = {
|
||
current: 0,
|
||
};
|
||
|
||
onChange = current => {
|
||
console.log('onChange:', current);
|
||
this.setState({ current });
|
||
};
|
||
|
||
render() {
|
||
const { current } = this.state;
|
||
|
||
return (
|
||
<div>
|
||
<Steps current={current} onChange={this.onChange}>
|
||
<Step title="Step 1" description="This is a description." />
|
||
<Step title="Step 2" description="This is a description." />
|
||
<Step title="Step 3" description="This is a description." />
|
||
</Steps>
|
||
|
||
<Divider />
|
||
|
||
<Steps current={current} onChange={this.onChange} direction="vertical">
|
||
<Step title="Step 1" description="This is a description." />
|
||
<Step title="Step 2" description="This is a description." />
|
||
<Step title="Step 3" description="This is a description." />
|
||
</Steps>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
ReactDOM.render(<Demo />, mountNode);
|
||
```
|