# Radio demo

- order: 2
- hide:true

list 模式 demo

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
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 = {
      value: 2
    };
  }

  groupChange(value) {
    this.setState({
      value: value
    });
    console.log('group', value);
  }

  onChange(value) {
    console.log('item', value);
  }
  press(index) {
    console.log(index);
    this.setState({
      value: index
    });
  }

  render() {
    const { value } = this.state;
    return (
      <Page title="radio">
        <Page.Intro main="list 模式" />
        <Radio.Group style={styles.groupWrap} onChange={this.groupChange.bind(this)} value={value}>
          <View style={styles.item}>
            <Text style={styles.title}>请选择延迟天数</Text>
          </View>
          <Touchable style={styles.item} onPress={this.press.bind(this, 1)}>
            <Text style={styles.delayValue}>3天</Text>
            <Radio size="small" value={1} type="list" />
          </Touchable>
          <Touchable style={styles.item} onPress={this.press.bind(this, 2)}>
            <Text style={styles.delayValue}>5天</Text>
            <Radio size="small" value={2} type="list" />
          </Touchable>
          <Touchable style={styles.item} onPress={this.press.bind(this, 3)}>
            <Text style={styles.delayValue}>7天</Text>
            <Radio size="small" value={3} type="list" />
          </Touchable>
        </Radio.Group>
        <Radio.Group style={styles.groupWrap} onChange={this.groupChange.bind(this)} value={value} type="dot">
          <View style={styles.item}>
            <Text style={styles.title}>请选择支付方式</Text>
          </View>
          <Touchable style={styles.item} onPress={this.press.bind(this, 1)}>
            <Text style={styles.delayValue}>支付宝</Text>
            <Radio size="small" value={1} type="dot" />
          </Touchable>
          <Touchable style={styles.item} onPress={this.press.bind(this, 2)}>
            <Text style={styles.delayValue}>银行卡</Text>
            <Radio size="small" value={2} type="dot" />
          </Touchable>
          <Touchable style={styles.item} onPress={this.press.bind(this, 3)}>
            <Text style={styles.delayValue}>刷脸</Text>
            <Radio size="small" value={3} type="dot" />
          </Touchable>
        </Radio.Group>
      </Page>
    );
  }
};
const styles = {
  title: {
    color: '#3089dc',
    height: 88,
    lineHeight: 88,
    fontSize: 30
  },
  groupWrap: {
    backgroundColor: '#ffffff',
    flexDirection: 'column',
    paddingLeft: 30,
    paddingRight: 30
  },
  item: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderTopWidth: 2,
    borderTopColor: '#EDEDEF',
    borderTopStyle: 'solid',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 40,
    paddingRight: 40,
    backgroundColor: 'transparent',
    'backgroundColor:active': '#DADADA'
  },
  delayValue: {
    color: '#383B3E'
  }
};
render(<App />);
```