2015-07-16 18:23:25 +08:00
|
|
|
# 组合
|
|
|
|
|
|
|
|
- order: 1
|
|
|
|
|
|
|
|
Radio 组合。
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
````jsx
|
|
|
|
var Radio = antd.Radio;
|
2015-07-16 22:40:49 +08:00
|
|
|
var RadioGroup = React.createClass({
|
2015-07-16 18:23:25 +08:00
|
|
|
getInitialState() {
|
|
|
|
return {
|
2015-07-17 11:17:50 +08:00
|
|
|
value: ''
|
2015-07-16 22:40:49 +08:00
|
|
|
};
|
2015-07-16 18:23:25 +08:00
|
|
|
},
|
|
|
|
handleChange(e) {
|
|
|
|
this.setState({
|
2015-07-16 22:40:49 +08:00
|
|
|
value: e.target.value
|
2015-07-16 18:23:25 +08:00
|
|
|
});
|
|
|
|
},
|
|
|
|
render() {
|
|
|
|
return <div>
|
2015-07-16 22:40:49 +08:00
|
|
|
<p>
|
|
|
|
<label>
|
|
|
|
<Radio value="a"
|
|
|
|
checked={this.state.value === 'a'}
|
2015-07-17 11:06:38 +08:00
|
|
|
onChange={this.handleChange} />
|
2015-07-17 11:17:50 +08:00
|
|
|
选项A
|
2015-07-16 22:40:49 +08:00
|
|
|
</label>
|
|
|
|
<br/>
|
|
|
|
<label>
|
|
|
|
<Radio value="b"
|
|
|
|
checked={this.state.value === 'b'}
|
2015-07-17 11:06:38 +08:00
|
|
|
onChange={this.handleChange} />
|
2015-07-17 11:17:50 +08:00
|
|
|
选项B
|
2015-07-16 22:40:49 +08:00
|
|
|
</label>
|
|
|
|
<br/>
|
|
|
|
<label>
|
|
|
|
<Radio value="c"
|
|
|
|
checked={this.state.value === 'c'}
|
2015-07-17 11:06:38 +08:00
|
|
|
onChange={this.handleChange} />
|
2015-07-17 11:17:50 +08:00
|
|
|
选项C
|
2015-07-16 22:40:49 +08:00
|
|
|
</label>
|
|
|
|
<br/>
|
|
|
|
<label>
|
|
|
|
<Radio value="d"
|
|
|
|
checked={this.state.value === 'd'}
|
2015-07-17 11:06:38 +08:00
|
|
|
onChange={this.handleChange} />
|
2015-07-17 11:17:50 +08:00
|
|
|
选项D
|
2015-07-16 22:40:49 +08:00
|
|
|
</label>
|
|
|
|
</p>
|
2015-07-16 18:23:25 +08:00
|
|
|
<p style={{"margin-top": 20}}>
|
2015-07-16 22:40:49 +08:00
|
|
|
你选中了:{this.state.value} 。
|
2015-07-16 18:23:25 +08:00
|
|
|
</p>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
});
|
2015-07-16 22:40:49 +08:00
|
|
|
React.render(<RadioGroup />, document.getElementById('components-radio-demo-group'));
|
2015-07-16 18:23:25 +08:00
|
|
|
````
|