RadioGroup

版本要求:

@ray-js/ray≥0.5.10

描述

单选选择器组，由多个 Radio 组成。options 与 children 二选一。

属性

属性	类型	必填	默认值	说明
		否	-	选项列表，与 children 二选一
`children`	any \| any[] \| string	否	-	子节点，通常为多个 Radio，与 options 二选一
`name`	string	否	-	表单控件名称，提交表单时作为键名
`disabled`	boolean	否	false	是否禁用
		否	-	选中项发生改变时触发
`id`	string	否	-	ID undefined
`className`	string	否	-	css 类名 undefined
`style`	any	否	-	样式 undefined
		否	-	点击回调 undefined
		否	-	开始触摸事件回调 undefined
		否	-	触摸移动事件回调 undefined
		否	-	触摸取消事件回调 undefined
		否	-	触摸结束事件回调 undefined
		否	-	长按事件回调, 不再触发点击事件 undefined
`slot`已废弃	string	否	-	小程序组件插槽标识 undefined ↳ 该属性仅在小程序基础组件中使用, 不建议在 React DSL 中使用
		否	-	长按触发 undefined

示例代码

基础用法

import React from 'react';
import { RadioGroup, Radio, Label } from '@ray-js/ray';

export default function () {
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
  ];

  return (
    <RadioGroup onChange={(e) => console.log('选中值:', e.detail.value)}>
      {options.map((item) => (
        <Label key={item.value}>
          <Radio value={item.value} />
          {item.label}
        </Label>
      ))}
    </RadioGroup>
  );
}

options 数据驱动

import React from 'react';
import { RadioGroup, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Text style={{ marginBottom: '10px' }}>使用 options 渲染:</Text>
      <RadioGroup
        name="fruit"
        disabled={false}
        options={[
          { label: '苹果', value: 'apple', checked: true },
          { label: '香蕉', value: 'banana' },
          { label: '葡萄', value: 'grape', disabled: true },
        ]}
        onChange={(e) => console.log('选中:', e.detail.value)}
      />
    </View>
  );
}