mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 13:18:04 +08:00
52 lines
1.1 KiB
Markdown
52 lines
1.1 KiB
Markdown
---
|
||
order: 2
|
||
title:
|
||
zh-CN: RadioGroup 垂直
|
||
en-US: Vertical RadioGroup
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
垂直的 RadioGroup，配合更多输入框选项。
|
||
|
||
## en-US
|
||
|
||
Vertical RadioGroup, with more radios.
|
||
|
||
```jsx
|
||
import { Radio, Input } from 'antd';
|
||
const RadioGroup = Radio.Group;
|
||
|
||
class App extends React.Component {
|
||
state = {
|
||
value: 1,
|
||
}
|
||
onChange = (e) => {
|
||
console.log('radio checked', e.target.value);
|
||
this.setState({
|
||
value: e.target.value,
|
||
});
|
||
}
|
||
render() {
|
||
const radioStyle = {
|
||
display: 'block',
|
||
height: '30px',
|
||
lineHeight: '30px',
|
||
};
|
||
return (
|
||
<RadioGroup onChange={this.onChange} value={this.state.value}>
|
||
<Radio style={radioStyle} value={1}>Option A</Radio>
|
||
<Radio style={radioStyle} value={2}>Option B</Radio>
|
||
<Radio style={radioStyle} value={3}>Option C</Radio>
|
||
<Radio style={radioStyle} value={4}>
|
||
More...
|
||
{this.state.value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
|
||
</Radio>
|
||
</RadioGroup>
|
||
);
|
||
}
|
||
}
|
||
|
||
ReactDOM.render(<App />, mountNode);
|
||
```
|