# CheckboxGroup组件

## 组件API

### CheckboxGroup

- `name: [String]` ： `Checkbox`的 `name` ；
- `valueSelected: [Arrary]` ： 当前选定的值，请使用数组；
- `onChange: [Function]` : 通过这个方法选定新的值和相关方法；
- `WrapName: [String]` : 表示使用什么元素来渲染`CheckboxGroup`，默认为`div`；
- `children: [Node]`: 定义你的 `Checkbox` 和其他组件；

### Checkbox

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

## 多选框组使用方法

```javascript
import React, { Component } from 'react';
import {CheckboxGroup, Checkbox}  from './components/CheckboxGroup'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fruits: ['apple','watermelon']
    };
  }

  render() {
    return (
      <div className="App">
        <h1>点睛前端CheckboxGroup组件</h1>
          <h3>CheckboxGroup 和 Checkbox 组件</h3>
          <div className="demo-in">
            <CheckboxGroup
              name="fruits"
              valueSelected={this.state.fruits}
              onChange={this.fruitsChanged}>
              <Checkbox value="apple" text="Apple"/>
              <Checkbox value="orange" text="Orange"/>
              <Checkbox value="watermelon" text="Watermelon"/>
            </CheckboxGroup>
          </div>
      </div>
    );
  }
  
  fruitsChanged = (newFruits) => {
    this.setState({
      fruits: newFruits
    });
  }
};

export default App;

```