zoukankan      html  css  js  c++  java
  • RN 使用Checkbox实现多选

    这个多选功能使用的是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 (
                        <CheckboxItem
                            key={index}
                            style={{ height: 70 }}
                            onChange={(event: any) => {
                                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);
                            }}
                        >
                            {/* 自定义控件 */}
                            <View style={{ flex: 1, paddingVertical: 15, flexDirection: 'row' }}>
                                <SelBidderView
                                    bidderHeadImg={item.iconUrl}
                                    bidderName={item.userName}
                                />
                            </View>
                        </CheckboxItem>
                    );
                })
            }
    
        }
  • 相关阅读:
    数据结构与算法--绪论
    Django之模板(T)
    博客园之MD文件代码块添加隐藏/显示按钮
    博客园之背景特效
    博客园之生成侧边目录
    占位先1
    Django之视图(V)
    Django之ORM
    Django框架
    tomcat在centos下启动缓慢,耗时较长
  • 原文地址:https://www.cnblogs.com/lijianyi/p/11481614.html
Copyright © 2011-2022 走看看