收藏
回答

radio-group怎么和自定义组件里的radio关联上?

radio-group节点下包含了自定义组件,radio在这个子组件里面。

回答关注问题邀请回答
收藏

1 个回答

  • CRMEB
    CRMEB
    2023-09-21

    要将 radio-group 和自定义组件中的 radio 关联起来,您可以使用以下步骤:

    1.在自定义组件中,创建一个 properties 对象,用于接收父组件传递的值。

    // 自定义组件 my-radio 的 js 文件
    Component({
      properties: {
        value: {
          type: String,
          value: '',
          observer: 'valueChanged'
        },
        options: {
          type: Array,
          value: []
        }
      },
    
      methods: {
        valueChanged(newValue) {
          // 监听 value 属性的变化,当父组件的值变化时,更新 radio 的选中状态
          const { options } = this.data;
          options.forEach(option => {
            option.checked = option.value === newValue;
          });
          this.setData({ options });
        },
    
        handleRadioChange(e) {
          const { value } = e.detail;
          this.triggerEvent('change', { value });
        }
      }
    })
    

    2.在自定义组件的模板中,使用 radio-group 组件和 radio 组件,并绑定事件。

    <!-- 自定义组件 my-radio 的 wxml 文件 -->
    <view>
      <radio-group bindchange="handleRadioChange">
        <block wx:for="{{ options }}">
          <radio value="{{ item.value }}" checked="{{ item.checked }}">{{ item.label }}</radio>
        </block>
      </radio-group>
    </view>
    

    3.在父组件中使用自定义组件,并通过属性传递值和监听事件。

    <!-- 父组件的 wxml 文件 -->
    <my-radio options="{{ radioOptions }}" value="{{ selectedValue }}" bind:change="handleRadioChange"></my-radio>
    // 父组件的 js 文件
    Page({
      data: {
        radioOptions: [
          { label: '选项1', value: 'option1' },
          { label: '选项2', value: 'option2' },
          { label: '选项3', value: 'option3' }
        ],
        selectedValue: ''
      },
    
      handleRadioChange(e) {
        const { value } = e.detail;
        this.setData({ selectedValue: value });
      }
    })
    

    通过上述步骤,您可以将自定义组件中的 radio 和外部的 radio-group 关联起来。当父组件中的值改变时,会触发传递给自定义组件的 value 属性的变化,从而更新自定义组件中 radio 的选中状态。

    2023-09-21
    有用 1
    回复 3
    • 清蒸鱼
      清蒸鱼
      2023-09-22
      你这个是radio-group和radio在同个组件内,我的radio-group在父组件,子组件只有radio
      2023-09-22
      回复
    • bella
      bella
      01-03回复清蒸鱼
      请问这个问题有结果了吗?
      01-03
      回复
    • 清蒸鱼
      清蒸鱼
      01-05回复bella
      做不了这种设计了
      01-05
      回复
登录 后发表内容