Javascript 如何从react native中的react native elements library的带有复选框的平面列表中选择多个项目？

我正在创建一个带有复选框和文本的平面列表，但我要选择一个项目它会选择列表中的所有项目，我想选择一个或多个或所有项目，但不是所有项目都像这样，当我选择单个项目时，它会检查所有项目是否为真。 这里我从api获取列表。 这是我的密码：

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>
    )
  }
}

import React，{Component}来自“React”
从“react native”导入{View，FlatList}
从“../components/Headers”导入{HeaderView}；
从“../values/color”导入{color}；
从导入TextViewClickable，{TextViewNonClickable}
“../components/TextView”；
从“../values/dimensions”导入{dimension}；
从“反应本机模态”导入模态；
从“react native”导入{标题、图标、复选框、按钮}-
元素'；
从“../utils”导入{getSessionId，showMessage}
/一般函数'；
从“../networkRequest/API”导入{showMyLists}；
从“../networkRequest”导入{onSuccess，onFailure}
/AxiosRequest'；
导出默认类AllList扩展组件{
建造师（道具）{
超级（道具）
这个州={
列表：[]，
被检查：错误
}
}
组件willmount（）{
this.getAllList（）
}
getAllList=（）=>{
//this.showRefreshLoader（）；
getSessionId（）。然后（sessionId=>{
showMyLists（sessionId）。然后（response=>{
onSuccess（响应）。然后（successResponse=>{
//this.hideRefreshLoader（）；
这是我的国家({
列表：成功响应，
})
})
}).catch（错误=>{
//this.hideRefreshLoader（）；
onFailure（错误）。然后（errorMessage=>{
showMessage（errorMessage）；
})
})
})
}
IsIncheckedornot=（）=>{
if（this.state.isChecked）{
this.setState（{isChecked:false}）
}否则{
this.setState（{isChecked:true}）
}
}
_renderListItem=（{item}）=>{
返回(
this.isIconCheckedOrNot（）}
/>
)
}
//渲染屏幕
render（）{
const{modalVisibility，closeModal}=this.props；
返回(
项目+索引}
style={{flex:1，width:dimension.screenWidth}
showsVerticalScrollIndicator={false}
永远是垂直的
/>
)
}
}

导出默认类AllList扩展组件{
建造师（道具）{
超级（道具）
这个州={
已检查：[]，
}
}
组件将装入=（）=>{
让initialCheck=this.state.lists.map（（）=>false）；
this.setState（{isChecked:initialCheck}）
}
getAllList=（）=>{
this.showRefreshLoader（）；
getSessionId（）。然后（sessionId=>{
showMyLists（sessionId）。然后（response=>{
onSuccess（响应）。然后（successResponse=>{
this.hideRefreshLoader（）；
这是我的国家({
列表：成功响应，
})
})
}).catch（错误=>{
this.hideRefreshLoader（）；
onFailure（错误）。然后（errorMessage=>{
showMessage（errorMessage）；
})
})
})
}
//将产品添加到选定列表
addProduct=（）=>{
showMessage（JSON.stringify（this.state.selectedLists））
getSessionId（）。然后（sessionId=>{
AddProductToList（sessionId，this.state.SelectedList，
然后（响应=>{
onSuccess（响应）。然后（响应=>{
警报（JSON.stringify（response.message））
})
}).catch（错误=>{
onFailure（错误）。然后（错误=>{
警报（JSON.stringify（错误））
})
})
})
}
isIconCheckedOrNot=（项目、索引）=>{
让{isChecked，selectedLists}=this.state；
isChecked[index]=！isChecked[index]；
this.setState（{isChecked:isChecked}）；
如果（已检查[索引]==真）{
selectedLists.push（项目列表\u id）
}否则{
selectedLists.pop（项目列表\u id）
}
}
_renderListItem=（{item，index}）=>{
报税表（
this.isIconCheckedOrNot（项，索引）}
/>
)
}
_onOkPress=（）=>{
this.props.closeModal（）；
}
//渲染屏幕
render（）{
const{modalVisibility，closeModal}=this.props；
返回(
项目+索引}
style={{flex:1，width:dimension.screenWidth}
showsVerticalScrollIndicator={false}
永远是垂直的
刷新控制={
{
这个是.getAllList（）；
}}
/>
}
/>
this.addProduct（）}
/>                
)
}
}

您使用了selectedLists.pop（item.list\u id），我相信它会删除最后一项

如何从arraylist中删除未选中的项

我的代码是：

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);

    }

---

可能的复制品看看你的“这”指的是什么。看起来您正在设置并查看AllList组件的选定状态。但实际上，您希望每行有一个选定的状态。因此，您的选择也应该是一个列表，将索引及其所选状态放在一起。我不明白您想说什么。

selectedLists.pop（item.list\u id）

不是正确的方式。它有助于删除数组中的最后一项。您可以使用此函数代替需要Lodash库的函数

var newSelectedLists=\uu.filter（selectedLists，函数（o）{return o.list\u id！==item.list\u id}）
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);

    }