weex-nuke/src/node_modules/nuke-radio/docs/datasource.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Radio demo

- order: 1
- hide: true

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 Page from 'nuke-page';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      dataSource: 0,
      group: '宁波市'
    };
  }

  onChange = (value) => {
    this.setState({
      dataSource: value
    });
  };
  groupChange = (value) => {
    this.setState({
      group: value
    });
    console.log('group', value);
  };
  render() {
    const dataSource = [
      { value: 'appale', label: '苹果' },
      { value: 'pear', label: '梨' },
      { value: 'orange', label: '橙子' }
    ];

    return (
      <Page title="Radio">
        <Page.Intro main="Group 数据源模式" sub="整行可点击" />

        <Radio.Group
          style={styles.groupWrap}
          touchStyle={{ width: 80, height: 80 }}
          groupItemStyle={styles.groupItem}
          labelStyle={styles.labelStyle}
          value={this.state.dataSource}
          onChange={this.onChange}
          size="small"
          dataSource={dataSource}
        />
        <View style={styles.demo_result}>
          <Text>this.state.value : {this.state.dataSource}</Text>
        </View>

        <Page.Intro main="Group 数据源模式" sub="整行可点击" />

        <Radio.Group
          style={styles.groupWrap}
          touchStyle={{ width: 80, height: 80 }}
          groupItemStyle={styles.groupItem}
          value={this.state.dataSource}
          onChange={this.onChange}
          type="dot"
          size="small"
          reverse={true}
          dataSource={dataSource}
        />

        <View style={styles.demo_result}>
          <Text>this.state.value : {this.state.dataSource}</Text>
        </View>

        <Page.Intro main="Group 非数据源模式" sub="仅radio可点击" />
        <Radio.Group style={styles.groupWrap} onChange={this.groupChange} value={this.state.group}>
          <View style={styles.demo_item}>
            <Radio size="small" value="杭州市" type="dot" />
            <Text>杭州市</Text>
          </View>
          <View style={styles.demo_item}>
            <Radio size="small" value="宁波市" type="dot" />
            <Text>宁波市</Text>
          </View>
          <View style={styles.demo_item}>
            <Radio size="small" value="温州市" type="dot" />
            <Text>温州市</Text>
          </View>
          <View style={styles.demo_item}>
            <Radio size="small" value="绍兴市" type="dot" />
            <Text>绍兴市</Text>
          </View>
        </Radio.Group>
      </Page>
    );
  }
};
const styles = {
  groupWrap: {
    marginTop: 20,
    backgroundColor: '#ffffff',
    flexDirection: 'column',
    justifyContent: 'center'
  },
  labelStyle: {
    color: '#122834',
    marginRight: 40
  },
  demo_result: {
    backgroundColor: '#ffffff',
    paddingLeft: 32,
    height: 60,
    justifyContent: 'center',
    color: '#666666'
  },
  demo_item: {
    height: 104,
    marginTop: 30,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 12
  },
  groupItem: {
    borderBottomColor: '#C4C6CF',
    borderBottomWidth: 2,
    borderBottomStyle: 'solid',
    justifyContent: 'space-between'
  }
};
render(<App />);
```