javascript - 如何在复选框选中状态下添加和减去列表数据，并在 React Native 中取消选中

Question

在这个屏幕上，我用复选框映射数组(“数组上方”)值，有一些“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>

谢谢

Answer 1

代替 isChecked 使用 checked，它是状态如下的数组

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

现在更改复选框的句柄

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

最后根据checked数组计算和

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