# Radio demo

* order: 1

Group + 数据源

---

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

const dataSource = [
  { value: 'apple', label: '苹果' },
  { value: 'pear', label: '梨' },
  { value: 'orange', label: '橙子' },
];

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      dataSource: 'apple',
    };
  }

  groupChange = value => {
    this.setState({
      dataSource: value,
    });
    console.log('--->', value);
  };

  wrapPress = (options, itemOnChange) => {
    itemOnChange(options.value);
  };
  renderItem = (options, onChange) => {
    return (
      <Touchable
        onPress={() => this.wrapPress(options, onChange)}
        style={styles.touchable}
      >
        <Text style={styles.text}>{options.label}</Text>
        <Radio value={options.value} type="list" />
      </Touchable>
    );
  };
  render() {
    return (
      <Page title="Radio">
        <Page.Intro main="Group 数据源模式" sub="renderItem" />
        <Radio.Group
          style={styles.groupWrap}
          touchStyle={{ width: 80, height: 80 }}
          groupItemStyle={styles.groupItem}
          value={this.state.dataSource}
          onChange={this.groupChange}
          renderItem={this.renderItem}
          size="small"
          dataSource={dataSource}
        />
      </Page>
    );
  }
};
const styles = {
  groupWrap: {
    backgroundColor: '#ffffff',
    flexDirection: 'column',
    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',
  },
  groupItem: {
    borderBottomColor: '#F7F8FA',
    borderBottomWidth: 2,
    borderBottomStyle: 'solid',
  },
};
render(<App />);
```