React Native标签切换时更新sum状态的实现需求问询

嘿，我来帮你搞定这个React Native标签切换更新sum状态的问题！咱们一步步实现需求：页面默认显示invoice_specific的值，切换标签时sum自动同步对应标签的金额，还要配合输入框操作保持数据一致。

1. 修正初始状态，默认展示第一个标签的金额 #

首先得让页面刚加载时，sum就等于invoice_specific的初始值。注意别忘了在构造函数里调用super()，这是React组件的必备操作：

constructor() {
  super();
  this.state = { 
    sum: 0, 
    invoice_specific: 0, 
    as_hoc: 0,
    activeTabIndex: 0 // 新增：记录当前激活的标签索引，默认选中第一个标签
  };
  // 初始化sum为invoice_specific的初始值
  this.state.sum = this.state.invoice_specific;
  this.handleChangeTab = this.handleChangeTab.bind(this);
  this.handleChangeSum = this.handleChangeSum.bind(this);
}

2. 实现标签切换的sum更新逻辑 #

根据你提供的handleChangeTab里的obj输出，我们可以通过标签索引obj.i（第一个标签是0，第二个是1）来判断当前激活的标签，然后更新sum：

handleChangeTab = (obj) => {
  console.log({ obj });
  const { invoice_specific, as_hoc } = this.state;
  const activeIndex = obj.i;
  let newSum = invoice_specific;

  // 切换到第二个标签时，sum更新为as_hoc的值
  if (activeIndex === 1) {
    newSum = as_hoc;
  }

  this.setState({ 
    sum: newSum,
    activeTabIndex: activeIndex // 同步更新当前激活标签的索引
  });
};

如果你担心标签顺序变化导致索引失效，也可以用obj.ref.props.tabLabel来判断（更直观）：

// 替代上面的索引判断逻辑
if (obj.ref.props.tabLabel === "SPECIFIC") {
  newSum = invoice_specific;
} else if (obj.ref.props.tabLabel === "AD-HOC") {
  newSum = as_hoc;
}

3. 完善输入金额的同步逻辑 #

原代码里的handleChangeSum没实现，咱们得让输入框的内容同步更新对应标签的状态，同时更新sum：

handleChangeSum = (sumValue) => {
  // 把输入转为数字，防止非数字输入导致异常
  const numValue = parseFloat(sumValue) || 0;
  const { activeTabIndex } = this.state;

  if (activeTabIndex === 0) {
    // 当前在INVOICE SPECIFIC标签，更新invoice_specific和sum
    this.setState({
      invoice_specific: numValue,
      sum: numValue
    });
  } else {
    // 当前在AD-HOC标签，更新as_hoc和sum
    this.setState({
      as_hoc: numValue,
      sum: numValue
    });
  }
};

4. 添加展示sum的按钮 #

最后在页面里加一个展示sum的按钮，放在Tabs外面就行：

render(){
  const viewStyle = {flexDirection: 'column', padding:10, backgroundColor: '#fff', minHeight:deviceHeight }
  return(
    <View style={{flex:1}}>
      {/* 展示sum的按钮 */}
      <TouchableOpacity 
        style={{padding:15, backgroundColor: '#f0f0f0', marginHorizontal:10, marginVertical:8, borderRadius:4, alignItems:'center'}}
        onPress={() => alert(`当前选中金额: $${this.state.sum.toFixed(2)}`)}
      >
        <RegularText text={`当前金额: $${this.state.sum.toFixed(2)}`} textColor="#222" style={{fontSize:16}} />
      </TouchableOpacity>

      <Tabs onChangeTab={(obj)=> this.handleChangeTab(obj)}>
        <Tab heading="INVOICE SPECIFIC" tabLabel="SPECIFIC">
          <View style={viewStyle}>
            <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)}
                  value={this.state.invoice_specific.toString()} // 绑定对应标签的输入值
                />
              </Item>
            </View>
          </View>
        </Tab>
        <Tab heading="AD-HOC" tabLabel="AD-HOC">
          <View style={viewStyle}>
            <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)}
                  value={this.state.as_hoc.toString()} // 绑定对应标签的输入值
                />
              </Item>
            </View>
          </View>
        </Tab>
      </Tabs>
    </View>
  )
}

关键细节说明 #

• 新增的activeTabIndex用来跟踪当前激活的标签，确保输入金额时能准确更新对应标签的状态
• 输入框绑定了对应标签的状态值，切换标签时输入框会自动显示该标签已输入的金额
• 所有状态更新都通过setState完成，保证组件能正确重新渲染

内容的提问来源于stack exchange，提问作者Abhigyan Gaurav