RadioGroup 最后一个Radio无法触发onChange事件

[xyunsh]

问题描述
RadioGroup 点击最后一个Radio, onChange事件没有触发. 只有点击前面的一个Radio之后, 再点击最后一个Radio, onChange事件才能触发.
另外Label中加了for属性, onChange都没法触发了

// 这里可以贴代码
               <View className="weui-cells weui-cells_after-title">
                        <RadioGroup onChange={this.handleChange}>
                            {ous.map((ou)=>{
                                return (
                                    <Label className="weui-cell weui-check__Label" key={ou.id}>
                                        <Radio className="weui-check" value={ou.id} checked={ou.id}></Radio>
                                        <View className="weui-cell__bd">{ou.title}</View>
                                        {ou.selected &&
                                        <View className="weui-cell__ft weui-cell__ft_in-radio">
                                            <Icon className="weui-Icon-radio" type="success_no_circle" size="16"></Icon>
                                        </View>
                                        }
                                    </Label>
                                );
                            })}
                        </RadioGroup>
                        <View className="weui-cell weui-cell_link">
                            <Navigator url="create" className="weui-cell__bd">添加班级</Navigator>
                        </View>
                    </View>

期望行为
最后一个Radio可以触发onChange事件

报错信息

[这里请贴上你的完整报错截图或文字]

系统信息

• 操作系统: Mac
• Taro 版本 1.1.9
• Node.js 版本 9.11.1
• 报错平台 [h5, weapp] weapp

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[jinjinjin0731]

能贴一下编译之后的代码吗

[xyunsh]

能贴一下编译之后的代码吗

<block>
    <view class="ou-list-page page">
        <view class="page__bd">
            <view class="weui-cells__title">班级列表</view>
            <view class="weui-cells weui-cells_after-title">
                <radio-group bindchange="handleChange">
                    <label class="weui-cell weui-check__Label" wx:key="{{ou.id}}" wx:for="{{ous}}" wx:for-item="ou">
                        <radio class="weui-check" value="{{ou.id}}" checked="{{ou.id}}"></radio>
                        <view class="weui-cell__bd">{{ou.title}}</view>
                        <block wx:if="{{ou.selected}}">
                            <view class="weui-cell__ft weui-cell__ft_in-radio">
                                <icon class="weui-Icon-radio" type="success_no_circle" size="16"></icon>
                            </view>
                        </block>
                    </label>
                </radio-group>
                <view class="weui-cell weui-cell_link">
                    <navigator url="create" class="weui-cell__bd">添加班级</navigator>
                </view>
            </view>
        </view>
    </view>
</block>

[jinjinjin0731]

我尝试复现一下这个情况

[taro-bot]

CC @jinjinjin0731

[jinjinjin0731]

hello，请问还有这个问题吗

[xyunsh]

1.2.0-beta.7 还存在这个问题
@jinjinjin0731

[jinjinjin0731]

@xyunsh 还是小程序中对吧？

[xyunsh]

是的
@jinjinjin0731

[taro-bot]

CC @Chen-jj

[jinjinjin0731]

@Chen-jj 帮忙看一下咯

[Chen-jj]

@xyunsh 复现不了。

另外你说 Label 加 for 属性后点不动，极其怀疑是因为你没有给对应控件增加 id。

import Taro, { Component } from '@tarojs/taro'
import { View, RadioGroup, Label, Radio, Icon } from '@tarojs/components'

export default class PageView extends Component {
  state = {
    ous: [{
      id: 0,
      title: 'zero',
      selected: false
    }, {
      id: 1,
      title: 'one',
      selected: false
    }, {
      id: 2,
      title: 'two',
      selected: false
    }]
  }

  handleChange (e) {
    this.setState(prevState => {
      const cur = e.detail.value
      const ous = prevState.ous.map((ou, index) => {
        if (index == cur) {
          ou.selected = true
        } else {
          ou.selected = false
        }
        return ou
      })
      return { ous }
    })
  }

  render() {
    const ous = this.state.ous

    return (
      <View>
        <RadioGroup onChange={this.handleChange}>
          {ous.map(ou =>
            <Label key={ou.id} for={ou.id}>
              <Radio id={ou.id} value={ou.id} checked={ou.selected}></Radio>
              <View >{ou.title}</View>
              {ou.selected &&
              <View>
                <Icon type='success_no_circle' size='16' />
              </View>
              }
            </Label>
          )}
        </RadioGroup>
      </View>
    )
  }
}

[xyunsh]

谢谢, 是我的问题
我将checked设置成了ou.id, 这会导致最后一个radio为选中状态.所以不能点击了.
点一下其他将导致checked状态改变, 所以又能点击了.