Radio

概述[单选框]

<Radio /> 是一个单选框组件。

注意：

<Radio /> 是一个单一子节点组件！

当存在多个 <Radio /> 时，其分组依据 groupValue 属性的值。

务必为 <Radio /> 赋值高度，否则将不可见。

示例代码

import cooApp, { basicWidgets } from 'coolink'

const { Container, Radio, Text } = basicWidgets

export default class RadioGroup extends cooApp.Widget {
  state = {
    selected: ''
  }
	radioGroup = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Orange', value: 'orange' },
  ]

  render () {
    return {
      <Container>
      	{
      		this.radioGroup.map(({ label, value }) => (
          	<Radio
            	value={value}
							groupValue={this.state.selected}
              onChange={({ value}) => {
                this.setState({
                  selected: value
                })
              }}
						>
            	<Text>{label}</Text>
            </Radio>
          ))
    		}
      </Container>
    }
  }
}

组件属性

属性名	类型	说明
value	string	当前 Radio 的值
groupValue	string	当前 Radio 组选中的值 通过 groupValue 区分不同的 Radio 组
activeColor	number	选中后高亮的颜色值
onChange	Function	选中的值发生变化时的回调事件，具有 1 个参数 参数具有 value 属性，string 类型，表示当前选中的值

---

样例 1

export default class HomePage extends Widget<any, any> {
  state = {
    value: void 0
  };

  radioList = [
    '处女座 - 沙加',
    '双子座 - 撒加',
    '水瓶座 - 卡妙',
    '白羊座 - 穆先生',
    '狮子座 - 艾欧里亚'
  ];

  render() {
    return (
      <Page backgroundColor={Colors.Pagebg} appBar={<AppBar title="Radio 单选框组件" />}>
        <Container>
          {this.radioList.map((item) => (
            <Radio
              height={30}
              value={item}
              groupValue={this.state.value}
              activeColor={Colors.Red}
              onChange={({ value }) => {
                this.setState({ value });
              }}
            >
              <Text>{item}</Text>
            </Radio>
          ))}
        </Container>
      </Page>
    );
  }
}

上述例子的效果图：