javascript - 在选项卡上更改更新状态以响应本机

Question

这里两个选项卡的值不同，第一个选项卡值进入 invoice_specific 状态，第二个进入 as_hoc ，还有另一个状态 sum:0 。

我必须在 handleChangeTab() 函数的条件下更新该总和状态：如果我在选项卡 1 中，那么在总和状态 invoice_specific 值应该去，如果我在第二个选项卡中，那么在总和状态 as_hoc 值应该去。

在我的代码中听到有两个选项卡和一个按钮。

1. 选项卡值来自数组（道具）并填充并获取它们的总和（TransactionAmount 1050+1050+1050=3150）并显示在下面的按钮中。

2. 在第二个选项卡中有一个输入字段，我在其中输入任何值，并且该值显示在下面的按钮中。

现在，如果我转到第二个选项卡，那么只有那个值应该显示 whaic 我将在输入字段中输入 else 0 ，如果我回到第一个选项卡，那么总和值应该来自数组。

所有这些值都应显示在单个按钮中。

我将两个选项卡的值都设为状态，并且在我正在更改状态的情况下，但它不起作用。

请帮助下面的屏幕参考链接 https://xd.adobe.com/view/d733da48-5d0c-47ca-7ded-6fc8f0f609cf-a102/screen/37cb15c6-b56a-4b98-8612-e9b86d0dd34c/Android-Mobile-147/?全屏

console value of obj in function handleChangeTab()
     {i: 1, ref: {…}, from: 0}
    from: 0
    i: 1
    ref:
    $$typeof: Symbol(react.element)
    key: ".1"
    props:
    children: {$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}, …}
    heading: "AD-HOC"
    tabLabel: "AD-HOC"
    virtual: undefined

  // Below is 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={
      sum:0,
      invoice_specific:0,
      as_hoc:0  
      }

     handleChangeTab=(obj) =>{
     console.log("0000",obj);

    let objform=obj.form;
    console.log("0000",objform);
    this.setState({
      sum: objform === 0 ? this.state.as_hoc: this.state.invoice_specific ,
    })

  }

  }
  render(){
  this.state.checked.map((value, index) => { if(value) 
      { invoice_specific += financialTransactionDetail.financialTransactionDetail[index].TransactionAmount; } });
retun(

           <Tabs onChangeTab={(obj) => this.handleChangeTab(obj)}>
                  <Tab heading="INVOICE SPECIFIC"  tabLabel="SPECIFIC">
                  { !_.isEmpty(financialTransactionDetail.financialTransactionDetail) && financialTransactionDetail.financialTransactionDetail.map(
                    (data, index) => {
                      const formatedate = data.DueDate;
                      const formateDate = formatedate.split(' ')[0];
                      return(
                        <View key={index} style={{flexDirection:'row', padding:10, alignItems:'center', justifyContent:'space-between',backgroundColor:'#fff'}}>

                      <View style={{paddingRight:10, marginRight:10}}>
                      <CheckBox style={styles.checkBox} color="#00678f" checked={this.state.checked[index]} onPress={() =>this.handleChange(index)}/>
                      </View>
                      <View style={{flexDirection:'column',flex:1, padding:10, borderWidth:1, borderColor:'lightgrey', borderRadius:3}}>
                        <View style={{flexDirection:'row', alignItems:'center'}}>
                          {!this.state.checked[index] && <RegularText text={`₦ ${data.TransactionAmount}`} style={{paddingBottom:10, paddingRight:5}}/>}
                          <SmallText text={`Due by ${(formateDate)}`} style={{paddingBottom:10}}/>
                        </View>
                        {this.state.checked[index] && 
                        <RegularText text={`₦ ${data.TransactionAmount}`} style={{borderColor: '#00fff', borderBottomWidth:1}}>
                          </RegularText>
                        }
                      </View>
                    </View>
                      )
                    }
                  )
                  }

                  </Tab>
                  <Tab heading="AD-HOC" tabLabel="AD-HOC">
                    <View style={{flexDirection:'column', padding:10,  backgroundColor:'#fff', minHeight:deviceHeight }}>
                      <RegularText text="Enter Specific Amount to pay" style={{paddingBottom:5}} textColor="#959595"/>
                      <View>
                        <Item style={{borderColor: '#00fff', borderBottomWidth:1}}>
                          <Input
                              autoFocus={true}
                              onPress={() => this.handleChange('sumValue')}
                              onChangeText={(sumValue) => this.handleChangeSum(sumValue)}
                            />
                        </Item>
                      </View>
                    </View>
                  </Tab>
                </Tabs>
            </View>
          </View>
        </ScrollView>
        <View style={{bottom:0,position:'absolute', width: '100%'}}>
          <Button full onPress={()=>navigation.navigate('PaymentOptionsContainer',sum)}>
            <Text>Receive Payment ({sum})</Text>
          </Button>
        </View>

标签： javascriptreactjsreact-nativeecmascript-6