Radio - 《Taro 文档帮助手册教程》

sidebar_label: Radio
Type
Examples
RadioProps
- Property Support
API Support

title: Radio

sidebar_label: Radio

Single-select item.

Reference

Type

ComponentType<RadioProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

tsx
export default class PageRadio extends Component {
  state = {
    list: [
      {
        value: 'USA',
        text: 'United States',
        checked: false
      },
      {
        value: 'CHN',
        text: 'China',
        checked: true
      },
      {
        value: 'BRA',
        text: 'Brazil',
        checked: false
      },
      {
        value: 'JPN',
        text: 'Japan',
        checked: false
      },
      {
        value: 'ENG',
        text: 'United Kingdom',
        checked: false
      },
      {
        value: 'TUR',
        text: 'France',
        checked: false
      }
    ]
  }
  render () {
    return (
      <View className='container'>
        <Head title='Radio' />
        <View className='page-body'>
          <View className='page-section'>
            <Text>default style</Text>
            <Radio value='selected' checked>Selected</Radio>
            <Radio style='margin-left: 20rpx' value='not-selected'>Not Selected</Radio>
          </View>
          <View className='page-section'>
            <Text>recommend style</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>
    )
  }
}

html
<template>
  <view class="container">
    <view class="page-section">
      <text>default style</text>
      <radio value="selected" :checked="true">Selected</radio>
      <radio style="margin-left: 20rpx;" value="not-selected">Not Selected</radio>
    </view>
    <view class="page-section">
      <text>recommend style(Taro Contributors):</text>
        <radio-group @change="onChange">
          <label v-for="item in list" class="checkbox-list__label">
            <radio class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</radio>
          </label>
        </radio-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          value: 'yuche',
          text: 'yuche',
          checked: false
        },
        {
          value: 'cjj',
          text: 'cjj',
          checked: false
        },
        {
          value: 'xiexiaoli',
          text: 'xiexiaoli',
          checked: false
        },
        {
          value: 'honly',
          text: 'honly',
          checked: false
        },
        {
          value: 'cs',
          text: 'cs',
          checked: false
        },
        {
          value: 'zhutianjian',
          text: 'zhutianjian',
          checked: false
        },
        {
          value: '隔壁老李',
          text: '隔壁老李',
          checked: true
        }
      ]
    }
  },
  methods: {
    onChange: function(e) {
      console.log(e.detail.value)
    }
  }
}
</script>

RadioProps

Property	Type	Default	Required	Description
value	`string`		No	The ID of the `radio` component. When this `radio` is selected, the change event for `radio-group` will carry the value of `radio`.
checked	`boolean`	`false`	No	Specifies whether to select the checkbox.
disabled	`boolean`	`false`	No	Specifies whether to disable the component.
color	`string`	`"#09BB07"`	No	The color of the radio. It is the same as the color of the css.

Property Support

Property	WeChat Mini-Program	H5	React Native
RadioProps.value	✔️		✔️
RadioProps.checked	✔️	✔️	✔️
RadioProps.disabled	✔️	✔️	✔️
RadioProps.color	✔️		✔️

API Support

API	WeChat Mini-Program	H5	React Native
Radio	✔️	✔️	✔️