react-native自定义弹框多项选择组件

 react-native自定义弹框多项选择组件

 

选择

 

返回的值：

import React from 'react';
import {Checkbox} from 'antd-mobile-rn';
import {View,Text,Image,TouchableOpacity,Modal,TextInput,FlatList,ToastAndroid} from 'react-native';

export default class Selectmore extends React.Component{
    constructor(props){
        super(props)
        this.state={
            SelectData:this.props.SelectData,//数据源
            visible:false,//控制model显示隐藏
            activeItemObj:{},//选中的元素
        }
    }

    componentWillReceiveProps(nxprops){//接收新的props
        this.state.SelectData=nxprops.SelectData;
    }
   
    showListData(){//选中的内容显示
        let activeItem = this.state.activeItemObj;
        let display = [];
        for(let i in activeItem){
            if(activeItem[i]){
                display.push(activeItem[i]);
            }
        }
        if(display.length>0){
            return display.map((v,i)=>{v});
        }else{
            return 请选择
        }
    }

    option(){//点击确定---关闭model---数据返回父组件
            this.setState({
                visible:false,
                SelectData:this.props.SelectData
            });
            let activeItemObj = this.state.activeItemObj;
            let actives={};
            for(let i in activeItemObj){//过滤掉空的数据
                if(!!activeItemObj[i]){//如果存在数据，取出数据
                    actives[i] = activeItemObj[i];
                }
            }   
        this.props.opens(actives)
    }

    cansol(){//取消之后将model关闭，数据清空
        this.setState({
            visible:false,
            activeItemObj:{}
        });
        this.props.opens({});
    }

    selects(e,item){//选中元素---判断当前元素是否选中，选中将选中的元素添加到一个新的对象里面，否则设为空
        let s = e.target.checked;
        this.state.activeItemObj[item.id] = s?item.name:null;
        this.forceUpdate();
    }


    render(){
        let {color,fontSize} = {...this.props.TextColor}
        return(
            this.setState({visible:true})}>
            
                   {this.showListData()}
            
            
            {this.state.visible && this.option()}>
            
            {
                this.setState({visible:false});
            }}>
            
            
            this.cansol()}>取消
            this.option()}>确定
            
             index.toString()}
                renderItem={({item,index}) =>{
                    let isChecked = this.state.activeItemObj[item.id];
                    if(isChecked == undefined){
                        isChecked = this.state.activeItemObj[item.id] = false;
                    }
                    return(
                    this.selects(e,item)}>
                    {item.name}
                    
                    )
                  }}
                />
            
            
            }
        
        )

 

/*****
*
*数据源${SelectData}
*
****/
数据格式
let SelectData = [
	{name:'假数据111111',id:1},
	{name:'假数据222222',id:2},
	{name:'假数据333333',id:3},
	{name:'假数据444444',id:4},
	{name:'假数据555555',id:5},
]


使用：      
opens(v){//接收子组件传递过来的数据
         console.log('在这里处理子组件返回的值');
        
   }