如何使用 react native 中 react native 元素库中的复选框从 flatlist 中选择多个项目？

Question

I am creating a flat list with checkbox and text,but i am going to selecting a single item it selects all the items from the list, and i want to select single or multiple or all items but not all like this, when i selecting single item it checks true to all items. Here i am fetching list from api. Here is my Code :

import React, { Component } from 'react'
import { View,FlatList} from 'react-native'
import { HeaderView } from '../components/Headers';
import { color } from '../values/color';
import TextViewClickable, { TextViewNonClickable } from     
    '../components/TextView';
import { dimension } from '../values/dimensions';
import Modal from 'react-native-modal';
import { Header, Icon, CheckBox, Button } from 'react-native-
    elements';
import { getSessionId, showMessage } from '../utils
    /GeneralFunctions';
import { showMyLists } from '../networkRequest/API';
import { onSuccess, onFailure } from '../networkRequest
    /AxiosRequest';

export default class AllLists extends Component {

constructor(props){
    super(props)
    this.state={
        lists : [],
        isChecked : false
    }
}

componentWillMount() {
    this.getAllList()
}

getAllList = () => {
  //  this.showRefreshLoader();
    getSessionId().then(sessionId => {
    showMyLists(sessionId).then(response => {
        onSuccess(response).then(successResponse => {
    //    this.hideRefreshLoader();
        this.setState({
            lists:successResponse,
        })
        })
    }).catch(error => {
       // this.hideRefreshLoader();
        onFailure(error).then(errorMessage => {
        showMessage(errorMessage);
        })
    })
    })
}

isIconCheckedOrNot = () => {
    if(this.state.isChecked){
        this.setState({isChecked:false})
    }else {
        this.setState({isChecked:true})
    }
}

_renderListItem = ({item}) => {
    return(

        <View style=
     {{flex:1,flexDirection:'row',alignItems:'center',
    justifyContent:'flex-start'}}>
            <CheckBox
                checked={this.state.isChecked}
                onPress={() => this.isIconCheckedOrNot()}
            />
            <TextViewNonClickable
                textViewText={item.name}
                textStyle=
    {{color:color.colorBlack,fontWeight:'700'}}
            />
        </View>
    )
}

//render screen
render() {

const {modalVisibility,closeModal} = this.props;

return (
    <Modal
        animationIn='zoomInDown'
        animationOut='zoomOutDown'
        isVisible={modalVisibility}
        animationInTiming={300}s
        animationOutTiming={300}
        onBackButtonPress={closeModal}
        style={{margin:32}}
    >
        <View style={{alignItems:'flex-start', 
            flex:1,backgroundColor:color.colorWhite}}>
            <Header
                placement='left'
                leftComponent={
                    <Icon name='cross' type='entypo' color='white' 
        iconStyle={{padding:16}} 
                        onPress={closeModal}/>
                    }
                centerComponent={{ text: 'My Lists', 
                    style: [{ color: 
    'white',fontWeight:'bold',fontSize:24 }] }} 
                outerContainerStyles=
    {{alignSelf:'stretch',height:64,borderBottomWidth:0}}
                backgroundColor={color.loginBgColor}
            />
            <FlatList
                data={this.state.lists}
                renderItem={this._renderListItem}
                keyExtractor={(item,index) => item+index}
                style={{flex:1,width:dimension.screenWidth}}
                showsVerticalScrollIndicator={false}
                alwaysBounceVertical
            />
            <Button
                title={'Ok'}
                containerStyle=
    {{position:'absolute',bottom:10,right:10}}
                onPress={closeModal}
                buttonStyle=
    {{paddingHorizontal:16,paddingVertical:8,
    backgroundColor:color.colorAccent}}
            />

        </View>
    </Modal>
    )
  }
}

Answer 1

export default class AllLists extends Component {

constructor(props){
    super(props)
    this.state={
        isChecked : [],
}
}

componentWillMount = () => {
    let initialCheck = this.state.lists.map(() => false);
    this.setState({isChecked : initialCheck})
}

getAllList = () => {
 this.showRefreshLoader();
    getSessionId().then(sessionId => {
        showMyLists(sessionId).then(response => {
            onSuccess(response).then(successResponse => {
            this.hideRefreshLoader();
            this.setState({
                lists:successResponse,
            })
        })
    }).catch(error => {
        this.hideRefreshLoader();
        onFailure(error).then(errorMessage => {
            showMessage(errorMessage);
        })
      })
    })
}

//add product to selected lists 
addProduct = () => {

    showMessage(JSON.stringify(this.state.selectedLists))
    getSessionId().then(sessionId => {
        addProductToLists(sessionId,this.state.selectedLists,
    this.props.productId).then(response => {
            onSuccess(response).then(response => {
                alert(JSON.stringify(response.message))
            })
        }).catch(error => {
            onFailure(error).then(error => {
                alert(JSON.stringify(error))
            })
        })
    })
    }

    isIconCheckedOrNot = (item,index) => {
    let { isChecked,selectedLists} = this.state;
    isChecked[index] = !isChecked[index];
    this.setState({ isChecked : isChecked});
    if(isChecked[index] == true){
        selectedLists.push(item.list_id)
    }else {            
        selectedLists.pop(item.list_id)
    }

    }



    _renderListItem = ({item,index}) => {
    return(            
        <View >
            <CheckBox
                checked={this.state.isChecked[index]}
                onPress={() => this.isIconCheckedOrNot(item,index)}
            />
            <TextViewNonClickable
                textViewText={item.name}
                textStyle={{color:color.colorBlack,fontWeight:'700'}}
            />
        </View>
    )
}

_onOkPress = () => {
    this.props.closeModal();
}

//render screen
render() {

const {modalVisibility,closeModal} = this.props;

return (
    <Modal
        animationIn='zoomIn'
        animationOut='zoomOut'
        isVisible={modalVisibility}
        onBackButtonPress={closeModal}
        style={{margin:32}}
    >
        <View >
             <FlatList
                data={this.state.lists}
                renderItem={this._renderListItem}
                keyExtractor={(item,index) => item+index}
                style={{flex:1,width:dimension.screenWidth}}
                showsVerticalScrollIndicator={false}
                alwaysBounceVertical
                refreshControl = {
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={() => {
                            this.getAllList();
                        }}
                    />
                }
            />
            <Button
                title={'Ok'}
                containerStyle={{position:'absolute',bottom:10,right:10}}
                onPress={() => this.addProduct()}

            />                
        </View>
    </Modal>
)
  }
}

Answer 2

you used selectedLists.pop(item.list_id),which i believe deletes last item

how to delete unchecked items from arraylist

my code is:

handleCheckChange = (item, index) => {

        let checked = [...this.state.checked];
        checked[index] = !checked[index];
        this.setState({ checked });     

        console.log("state checked at index: " + this.state.checked[index]);

        if (checked[index] == true) {
            newpay1arrayList.push(item);
            this.setState({ newpay1arrayList: newpay1arrayList });

        }

        else {

            var newArray = newpay1arrayList.filter(e => e !== false);
            // newpay1arrayList.splice(index, 1);
            this.setState({ newpay1arrayList: newArray});
            console.log("new pay array:" + newArray);

    }