Question

两个选项卡中的值都不同，第一个选项卡值处于invoice_specific状态，第二个选项卡处于as_hoc状态，另一个状态为sum：0。

我必须在handleChangeTab（）函数中的条件下更新该总和状态：如果我在选项卡1上，则总和状态下的invoice_specific值应该转到，如果我在 secon选项卡，然后在求和状态下，as_hoc值应为。

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

标签值来自数组（props），填充并获取它们的总和（TransactionAmount 1050 + 1050 + 1050 = 3150），并显示在下面的按钮中。
在“第二个”选项卡中，有一个输入字段，我在其中输入任何值，该值显示在按钮下方。

现在，如果我转到第二个选项卡，则仅显示该值，然后在输入字段中输入0，然后再次返回第一个选项卡，该值应来自数组。

所有此值应显示在单个按钮中。

我同时使用两个制表符，值是state，在条件下，我正在更改状态，但是它不起作用。

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

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>

在选项卡上更改会更新本机状态

0 个答案: