RN 使用Checkbox实现多选-白红宇的个人博客

RN 使用Checkbox实现多选

发布日期：2022-04-05 00:52:11 浏览次数：3 分类：博客文章

本文共 1530 字，大约阅读时间需要 5 分钟。

这个多选功能使用的是Ant Design Mobile RN 库中的 Checkbox来实现，话不多说直接上代码

1、引入 import { Checkbox,} from '@ant-design/react-native';

2、声明 const CheckboxItem = Checkbox.CheckboxItem;

3、使用

//  使用map实现多选    private showMap() {        let dataList: any[] = this.state.data        if (dataList && dataList.length) {            return dataList.map((item, index) => {                return (                    
    
      {                            let bidDocId: number = item.bidDocId                            // 保存选中结果list                            let oData: any = this.state.bidDocIdList;                            // 如果是选中状态 则判断bidDocIdList是否含有该对象，若无则添加                            if (event.target.checked) {                                if (!oData.includes(bidDocId)) {                                     oData.push(bidDocId)                                }                            } else {                            // 如果是未选中状态 则判断bidDocIdList是否含有该对象，若有则删除                                if (oData.includes(bidDocId)) {                                    let indexC = oData.indexOf(bidDocId)                                    oData.splice(indexC,1)                                }                            }                            UtilsSuperCommon.logWarn(this.state.bidDocIdList);                        }}                    >                        {/* 自定义控件 */}                        
                                 
                              
                         
                    );            })        }    }

转载地址：https://www.cnblogs.com/lijianyi/p/11481614.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：RN 使用Radio实现单选

下一篇：RN 的？使用

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章