时间戳

首页 > 解决方案 > 如何在复选框选中状态和未选中状态下添加和减去列表数据反应本机

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>

谢谢

标签： javascriptreactjsreact-nativeecmascript-6

解决方案

而不是 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;
  }
});

推荐阅读