# RadioGroup组件

## 组件API

### RadioGroup

- `name: [String]` ： `Radio`的 `name` ；
- `valueSelected: [String | Number]` ： 当前选定的值；
- `onChange: [Function]` : 通过这个方法选定新的值和相关方法；
- `WrapName: [String]` : 表示使用什么元素来渲染`RadioGroup`，默认为`div`；
- `children: [Node]`: 定义你的 `Radio` 和其他组件；
- `autoSelect: [Function]`: 当`valueSelected` 无法对应子 `Radio` 的时候，自动选中第一个 `Radio` 并返回其 `value` 作为参数；

### Radio

你传递给`Radio`组件的任何值都会最后被添加到input元素的属性上。

## 单选框组使用方法

```javascript
import React, { Component } from 'react';
import {RadioGroup, Radio}  from './components/ui/RadioGroup';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      valueSelected: 'apple'
    }
  }
  render() {
    return (
      <div className="App">
        <h1>点睛前端RadioGroup组件</h1>
	        <h3>RadioGroup 和 Radio 组件</h3>
	        <div className="demo-in">
	          <RadioGroup name="fruit" valueSelected={this.state.valueSelected} onChange={(val) => this.handleChange(val)}>
	            <Radio value="apple" text="Apple"/>
	            <Radio value="orange" text="Orange"/>
	            <Radio value="watermelon" text="Watermelon"/>
	          </RadioGroup>
	        </div>
      </div>
    )
  }
  handleChange(val) {
    this.setState({valueSelected: val})
  }
}
export default App;
```