# Checkbox Demo

* order: 2

复选框设置数据源,通过 renderItem 方法自定义 Item 的渲染。

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Checkbox from 'nuke-checkbox';
import Button from 'nuke-button';
import Page from 'nuke-page';
import Touchable from 'nuke-touchable';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.GroupFruit = [
      { value: 'apple', label: '苹果' },
      { value: 'pear', label: '梨' },
      { value: 'orange', label: '橘子' },
    ];
    this.state = {
      fruitChecked: ['apple'],
      groupChecked: [],
    };
  }

  onChange = value => {
    console.log('=---->', value);
    this.setState({
      fruitChecked: value,
    });
  };
  wrapPress(options, itemOnChange) {
    let checked = this.state.fruitChecked.indexOf(options.value) === -1;
    itemOnChange && itemOnChange(options.value, checked);
  }

  renderItem = (options, onChange) => {
    return (
      <Touchable
        onPress={() => this.wrapPress(options, onChange)}
        style={styles.touchable}
      >
        <Text style={styles.text}>{options.label}</Text>
        <Checkbox
          value={options.value}
          onChange={() => this.wrapPress(options)}
          type="list"
        />
      </Touchable>
    );
  };

  render() {
    return (
      <Page title="Checkbox Group">
        <Page.Intro main="renderItem" />
        <View style={styles.main}>
          <Checkbox.Group
            value={this.state.fruitChecked}
            onChange={this.onChange}
            renderItem={this.renderItem}
            size="small"
            dataSource={this.GroupFruit}
          />
        </View>
      </Page>
    );
  }
};

const styles = {
  main: {
    width: 750,
    marginTop: 30,
    justifyContent: 'center',
  },
  touchable: {
    width: 750,
    height: 80,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 2,
    borderBottomColor: '#F7F8FA',
    borderBottomStyle: 'solid',
    paddingLeft: 20,
    backgroundColor: '#ffffff',
  },
  text: {
    color: '#424242',
  },
};
render(<App />);
```