javascript - 如何在复选框选中状态和未选中状态下添加和减去列表数据

在此屏幕上，我正在使用复选框映射数组（“数组上方”）值，其中有一些“ data.TransactionAmount”，我必须计算所有值的总和并发送到下一个屏幕，
但如果我取消选中任何列表金额应减去。就像有3个值-1050 + 1050 + 1050 = 3150，如果我取消选中单个值，则应该为1050 + 1050-1050 = 2100，并且应在下面的按钮中更新。
如果我取消单项列表，则所有列表都将变为未选中状态。
在状态“求和”中，我将获得总和为默认值，并且按钮中出现值。但是，如果我取消选中任何列表，则值应为减。
请帮忙，谢谢，
下面的链接是我正在执行的参考。

https://xd.adobe.com/view/d733da48-5d0c-47ca-7ded-6fc8f0f609cf-a102/screen/37cb15c6-b56a-4b98-8612-e9b86d0dd34c/Android-Mobile-147/?fullscreen

 // Below is the array value
    financialTransactionDetail: Array(3)
    0:
    AdjustedAmount: "0"
    NetTransactionAmount: "1050"
    TransactionAmount: 1050
    1:
    AdjustedAmount: "0"
    NetTransactionAmount: "1050"
    TransactionAmount: 1050

    2:
    AdjustedAmount: "0"
    NetTransactionAmount: "1050"
    Status: "Unpaid"
    TransactionAmount: 1050

    this.state = {
          title: 'Payments against invoice',
          icon: 'sim',
          mobile:navigation.state.params.customer.service.serviceNumber,
          isChecked:true,
          sum :financialTransactionDetail.financialTransactionDetail.reduce((a, c) => { return a + c.TransactionAmount}, 0),
          transactionAmount :''
        }

         handleChange(key , value){

        this.setState({
          isChecked:!this.state.isChecked})
      }

      handleChangeSum = (sum) => {
        this.setState({
          sum: sum
        });
      }

     { !_.isEmpty(financialTransactionDetail.financialTransactionDetail) && financialTransactionDetail.financialTransactionDetail.map(
                        (data, index) => {
                          return(
                            <View key={index} style={{flexDirection:'row', padding:10, alignItems:'center', justifyContent:'space-between'}}>
                          <View style={{paddingRight:10, marginRight:10}}>
                            <CheckBox style={styles.checkBox} color="#00678f" checked={this.state.isChecked} onPress={() =>this.handleChange()}/>
                          </View>
                          <View style={{flexDirection:'column',flex:1, padding:10, borderWidth:1, borderColor:'lightgrey', borderRadius:10}}>
                            <View style={{flexDirection:'row', alignItems:'center'}}>
                              {!this.state.isChecked && <RegularText text={`₦ ${data.TransactionAmount}`} style={{paddingBottom:10, paddingRight:5}}/>}
                              <SmallText text="From 1-Jan-2019 to 31-Jan-2019" style={{paddingBottom:10}}/>
                            </View>
                            {this.state.isChecked &&
                            <RegularText text={`₦ ${data.TransactionAmount}`} style={{borderColor: '#00fff', borderBottomWidth:1}}>
                              </RegularText>
                            }
                          </View>
                        </View>
                          )
                        }
                      )
                      }

                      <View>
                  <Button full onPress={()=>navigation.navigate('PaymentOptionsContainer',sum)}>
                    <Text>Receive Payment ({sum})</Text>
                  </Button>
                </View>

谢谢

最佳答案

代替isChecked使用被检查的状态是下面的数组

// Instead
isChecked: true
// Use below one
checked: financialTransactionDetail.map(() => true)

现在让复选框基于如下所示的索引

// Instead
<CheckBox style={styles.checkBox} color="#00678f" checked={this.state.isChecked} onPress={() =>this.handleChange()}/>
// Use Below one
<CheckBox style={styles.checkBox} color="#00678f" checked={this.state.checked[index]} onPress={() =>this.handleChange(index)}/>

现在更改复选框的onChange复选框

handleChange(index){
  let newChecked = [...checked];
  newChecked[index] = !newChecked[index];
  this.setState({checked: newChecked})
}

最后根据检查的数组计算总和

let sum = 0;
this.state.checked.map((value, index) => {
  if(value) {
    sum += financialTransactionDetail[i].TransactionAmount;
  }
});