You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.2 KiB
56 lines
1.2 KiB
6 years ago
|
---
|
||
|
|
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.Step;
|
||
|
|
|
||
|
|
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);
|
||
|
|
```
|