javascript - 如何使用 React Native 中的 React Native 元素库中的复选框从平面列表中选择多个项目？

Question

我正在创建一个带有复选框和文本的平面列表，但我要选择一个项目，它会从列表中选择所有项目，我想选择单个或多个或所有项目，但不是全部这样，当我选择单个项目，它检查所有项目。 我在这里从 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>
    )
  }
}

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