React Native尺寸按钮点击样式异常：单个按钮点击全部样式变更求助

嘿，我懂你现在的困扰——点击单个尺寸按钮时所有按钮样式都同步变化，这是因为你现在用了全局的布尔状态来控制所有按钮的样式，咱们调整一下状态管理方式就能轻松解决！

问题根源 #

你当前的代码里，pressStatus和toggle1是全局的布尔值状态，所有尺寸按钮都依赖这两个状态来切换样式。只要其中一个状态改变，所有按钮都会触发样式更新，自然做不到单个按钮独立切换。

解决方案：用“选中的尺寸值”替代布尔状态 #

我们把状态改成记录具体选中的尺寸值，让每个按钮自己判断是否是当前选中的项，这样就能实现独立样式切换了。

1. 初始化选中状态 #

首先修改你的state，把原来的布尔状态换成记录选中尺寸的变量：

// 示例初始化，根据你的现有state调整
state = {
  productsList: [], // 你的产品列表
  selectedSize: null, // 新增：记录当前选中的尺寸，初始为null表示未选中
  // 其他原有状态...
};

2. 更新点击事件方法 #

修改toggle1方法，点击时把选中的尺寸值存入状态，如果点击的是已选中的尺寸，可以选择取消选中（根据你的需求调整逻辑）：

toggle1 = (item) => {
  // 逻辑：如果当前点击的尺寸已经选中，就取消；否则设置为选中
  this.setState(prevState => ({
    selectedSize: prevState.selectedSize === item ? null : item
  }));
};

3. 调整按钮的样式判断 #

每个按钮单独判断自己的尺寸值是否等于selectedSize，来应用对应样式：

<View style={{ paddingTop: 10, width: "49%" }}> 
  <View style={styles.sizeView}> 
    <View style={styles.sizeView3}> 
      <Text style={styles.chartText}>{t("size")}</Text> 
    </View> 
  </View> 
  <View style={styles.sizeButtons}> 
    {this.state.productsList[0].sizes.map((item, index) => { 
      return ( 
        <TouchableOpacity 
          key={index} 
          onPress={() => this.toggle1(item)} 
          // 核心：判断当前item是否为选中项，切换样式
          style={this.state.selectedSize === item ? styles.sizesAlt : styles.sizes} 
          onHideUnderlay={this._onHideUnderlay.bind(this)} 
          onShowUnderlay={this._onShowUnderlay.bind(this)} 
        > 
          <Text 
            key={index} 
            // 文字颜色同理，判断是否选中
            style={this.state.selectedSize === item ? { color: "#EC1C24" } : {}} 
          > 
            {item} 
          </Text> 
        </TouchableOpacity> 
      ); 
    })} 
  </View> 
</View>

原理说明 #

现在状态里存储的是具体的选中尺寸值（比如"l"、"m"），每个按钮在渲染时都会对比自己的尺寸值和selectedSize，只有匹配的按钮才会应用选中样式，其他按钮保持默认样式，这样就实现了单个按钮的独立样式切换啦！

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