首页 > 其他 > 详细

RN 使用Radio实现多选

时间:2019-09-13 12:40:40      阅读:99      评论:0      收藏:0      [点我收藏+]

这个单选功能使用的是Ant Design Mobile RN库中的Radio实现的,效果如图

技术分享图片

 

 

话不多说讲直接上代码

1、引入import { Radio} from ‘@ant-design/react-native‘;

2、声明 const RadioItem = Radio.RadioItem;

3、使用map实现

//  使用RadioItem实现多选 为每条数据绑定一个标记(checkedflag)然后每次点击更新这个值 类似原生多选的实现
    private showMapCheck() {
        let dataList: any[] = this.state.data
        if (dataList && dataList.length) {

            return dataList.map((item, index) => {
                return (
                    <RadioItem
                        key={index}
                        style={{ height: 70 }}
                        checked={item.checkedflag}
                        onChange={(event: any) => {

                            let oData: any = this.state.data;
                            let oNew: any[] = [];
                            oData.map((fItem: any) => {
                                // 将当前选中标记取反
                                if (item.userId === fItem.userId) {
                                    fItem.checkedflag = !fItem.checkedflag;
                                }
                                oNew.push(fItem);
                            });
                            this.setState({ data: oNew });
                        }}
                    >
                        {/* 自定义控件 */}
                        <View style={{ flex: 1, paddingVertical: 15, flexDirection: ‘row‘ }}>
                            <SelBidderView
                                bidderHeadImg={item.iconUrl}
                                bidderName={item.userName}
                            />
                        </View>
                    </RadioItem>
                );
            })
        }

    }

4、调用时通过checkedflag标记取出选中元素

 let oData: any = this.state.data;
 let oNew: any = [];
oData.map((fItem: any) => { if (fItem.checkedflag) { oNew.push(fItem.userId)
}
   });

 

RN 使用Radio实现多选

原文:https://www.cnblogs.com/lijianyi/p/11516163.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!