Version: 3.0.0-beta.5
Radio
RadioGroup
单项选择器，内部由多个 Radio 组成
属性及支持度
| 微信小程序 | H5 | ReactNative | 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|---|---|
| √ | √ | x | name | String | 表单组件中加上 name 来作为 key | |
| √ | √ | x | onChange | EventHandle | <RadioGroup/> 中选中项发生改变时触发 change 事件，detail = value:[选中的 radio 的 value 的数组] |
其他相关属性请看各小程序官方文档
Radio
单选项目
属性及支持度
| 微信小程序 | H5 | ReactNative | 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|---|---|
| √ | √ | value | String | false | <Radio/> 标识。当该 <Radio/> 选中时，<RadioGroup/> 的 change 事件会携带 <Radio/> 的 value | |
| √ | √ | √ | checked | Boolean | false | 当前是否选中 |
| √ | √ | √ | disabled | Boolean | false | 是否禁用 |
| √ | √ | color | Color | false | radio 的颜色，同 css 的 color | |
| √ | √ | √ | onChange | EventHandle | 选中项发生变化时触发 change 事件 |
其他相关属性请看各小程序官方文档
示例：
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Radio, RadioGroup } from '@tarojs/components'
import './radio.scss'
export default class PageRadio extends Component {
state = {
list: [
{
value: '美国',
text: '美国',
checked: false
},
{
value: '中国',
text: '中国',
checked: true
},
{
value: '巴西',
text: '巴西',
checked: false
},
{
value: '日本',
text: '日本',
checked: false
},
{
value: '英国',
text: '英国',
checked: false
},
{
value: '法国',
text: '法国',
checked: false
}
]
}
render () {
return (
<View className='container'>
<Head title='Radio' />
<View className='page-body'>
<View className='page-section'>
<Text>默认样式</Text>
<Radio value='选中' checked>选中</Radio>
<Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
</View>
<View className='page-section'>
<Text>推荐展示样式</Text>
<View className='radio-list'>
<RadioGroup>
{this.state.list.map((item, i) => {
return (
<Label className='radio-list__label' for={i} key={i}>
<Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label>
)
})}
</RadioGroup>
</View>
</View>
</View>
</View>
)
}
}