如何在本机javascript中分别选中和未选中时如何增加和减少复选框的值

Question

我在Flatlist组件中有一个如下所示的复选框：

 <CheckBox size={25}
                    keyValue={1}
                    selectedArrayObject={selectedArrayOBJ}
                    checked={false}
                    label = ''
                    color="transparent"
                    labelColor="#00703c"
                    checkBoxClick={() => this.checkBoxOnClicked(item.extension_attributes.price.firstApplicationPrice)}/>

而且我完整的FlatList组件看起来像这样：

<FlatList
          // data={this.state.planName.concat(this.state.serviceName)}
          data={planDetails[0].nbs_plans.concat(planDetails[0].nbs_services)}
          //data defined in constructor
          ItemSeparatorComponent={this.FlatListItemSeparator}
          //Item Separator View
          renderItem={({ item, index }) => (
            // Single Comes here which will be repeatative for the FlatListItems

         <View style={styles.cellContainerStyle} >
           <View backgroundColor = {"transparent"}   flexDirection = {'row'} justifyContent= {'flex-start'} margin={0}>
               <View  backgroundColor={'#73c573'}     justifyContent= {'center'} alignItems={'center'} width={35} height={35} marginTop={0} paddingTop={0}>
                 <View backgroundColor={'#73c573'} width={25} height={25}>
                   <CheckBox size={25}
                    keyValue={1}
                    selectedArrayObject={selectedArrayOBJ}
                    checked={false}
                    label = ''
                    color="transparent"
                    labelColor="#00703c"
                    checkBoxClick={() => this.checkBoxOnClicked(item.extension_attributes.price.firstApplicationPrice)}/>
                 </View>
               </View>
               <View flex={1.75} backgroundColor={'transparent'} marginLeft={5}>
                      <Text style={{ color: '#00703c', fontSize: 21, fontFamily: 'SourceSansPro-Bold' }}> {item.name}</Text>
                      </View>
               <View flex={0.15} marginTop={10}>
                    <TouchableOpacity style = {{ backgroundColor: 'transparent' }} onPress = {this.props.seeMore}  >
                       <Image source={require('../../../assets/img/iOS/chevron_right.png')} style={styles.rightArrowImageStyle}/>
                    </TouchableOpacity>
               </View>
        </View>
           <View  style={styles.cellSubViewTwo}>
         <Text  style = {styles.textHeaderStyle}>This plan includes:</Text>
         <View backgroundColor = {"transparent"}     flexDirection='column' marginTop={5}>
         {/* <Text>{JSON.stringify(this.state.serviceDetails[index].map(name=> name))} </Text>  */}
<SelectableChips selectedChipStyle={selectableStyles}  initialChips={item.extension_attributes.productServicetList} onChangeChips={(chips) => console.log(chips)} alertRequired={false} backgroundColor={"transparent"}
//initialChips={this.state.serviceDetails.concat(this.state.additionalServiceDetails)[index]} onChangeChips={(chips) => console.log(chips)} alertRequired={false} backgroundColor={"transparent"}
           subView={
            <TouchableOpacity style = {{ backgroundColor: 'transparent' }} onPress = {() =>this.gotoDetailsPage(item)}  >
            <View backgroundColor={'transparent'} flexDirection = {'row'} alignItems= {'center'} marginLeft={5}>
            <Text style={styles.seeMoreStyle}>See more</Text>
               <Image source={require('../../../assets/img/iOS/chevron_right.png')} style={styles.rightArrowSeeMoreImageStyle}/>
            </View>
             </TouchableOpacity>
           } />

[checkBoxOnClicked函数看起来像这样：

checkBoxOnClicked(price) {
    let totalPrice = 0;
    let num = Number(price.replace(/[$,]+/g,""));    
    if (selectedArrayOBJ.getArray().length == 0) {
        alert('CheckBox UnChecked');
        totalPrice=totalPrice-price;
        alert(totalPrice);


    } else {
      for(i=0;i<selectedArrayOBJ.getArray().length ;i++) {
        totalPrice = totalPrice + num;
        alert(totalPrice);
       // alert(parseInt(totalPrice));
        alert('CheckBox Checked');
      }

    }
  }

和SelectedArrayObj如下图所示：

class Selected_Items_Array {

  constructor() {
    selectedItemsArray = [];
    this.state = {
      // planName: planDetails[0].nbs_plans.map(data => data.name),
      // serviceDetails: planDetails[0].nbs_services.map(data => data.service_line),
    };
    // var result = planDetails.filter(d => {
    //   return d.nbs_plans[0].name = "TruComplete℠ Lawn Care Plan";
    // });
  //  alert(Object.keys(planDetails).length);
  //  alert(Object.keys(planDetails[0].nbs_plans).length);
  //  alert(JSON.stringify(planDetails[0].nbs_plans[0].productId));

  // alert(JSON.stringify(planDetails[0].nbs_plans[0].name));
  // alert(JSON.stringify(planDetails[0].nbs_plans.map(data => data.name)));
  }

  pushItem(option) {
    selectedItemsArray.push(option);
  }

  getArray() {
    return selectedItemsArray;
  }
}

因此，当我单击复选框时，相应项目的价格应被加上，而当我取消选中时，其价格应被减去。我为相同功能编写的功能未按预期运行，如果单击2个复选框，则会得到总和，但此后它会提供其他值：

  checkBoxOnClicked(price) {
    let totalPrice = 0;
    let num = Number(price.replace(/[$,]+/g,""));    
    if (selectedArrayOBJ.getArray().length == 0) {
        alert('CheckBox UnChecked');
        totalPrice=totalPrice-price;
        alert(totalPrice);


    } else {
      for(i=0;i<selectedArrayOBJ.getArray().length ;i++) {
        totalPrice = totalPrice + num;
        alert(totalPrice);
       // alert(parseInt(totalPrice));
        alert('CheckBox Checked');
      }

    }
  }

有人可以帮我解决这个问题吗？