RN 使用Checkbox实现多选

最新推荐文章于 2024-08-09 07:57:35 发布

weixin_30709061

最新推荐文章于 2024-08-09 07:57:35 发布

阅读量947

点赞数

原文链接：http://www.cnblogs.com/lijianyi/p/11481614.html

版权

这个多选功能使用的是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>
                );
            })
        }

    }