Javascript 在映射中反应本机特定的样式项

我有这段代码，它根据API生成大小按钮，如（al、l、m、s…），当用户单击一个圆圈时，我需要设置一个特定的样式，我尝试过这段代码，但它对所有圆圈都使用相同的样式，当单击它时，我需要更改一个圆圈的样式：

{t（“大小”）}
{this.state.productsList[0].size.map（（项，索引）=>{
返回(
this.toggle1（项）}
风格={
！this.state.pressStatus
？款式、尺寸
：styles.sizesAlt
}
onHideUnderlay={this.\u onHideUnderlay.bind（this）}
onShowUnderlay={this.\u onShowUnderlay.bind（this）}
>
{item}
);
})}

问题在于，您正在使用一个变量来更改所有按钮的切换状态（this.state.toggle1），因此，如果其中一个是toggle，它们都将被切换，因为我认为这不是预期的行为。 我建议为按钮创建一个纯组件，这样每个按钮都有自己的状态，并独立处理切换

至于样式，它们有两种语法：

 style={  !this.state.toggle ? {} : { color: "#EC1C24", backgroundColor: 'red' }}

或

因此，首先为圆形按钮创建一个组件

export class CircleButton extends Component {
  constructor(props) {
     super(props);
     this.state = {
       toggled: false
     };
 }
 render() {
   return (
      <TouchableOpacity
                    key={index}
                    onPress={() => this.toggle1(item)}
                    style={
                      !this.state.pressStatus
                        ? styles.sizes
                        : styles.sizesAlt
                    }
                    onHideUnderlay={this.props.onHideUnderlay.bind(this)}
                    onShowUnderlay={this.props.onShowUnderlay.bind(this)}
                  >
                    <Text
                      key={index}
                      style={
                        !this.state.toggle ? {} : { color: "#EC1C24" }
                      }
                    >
                      {item}
                    </Text>
      </TouchableOpacity>
   );
 }
}

导出类圆形按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
切换：false
};
}
render（）{
返回(
this.toggle1（项）}
风格={
！this.state.pressStatus
？款式、尺寸
：styles.sizesAlt
}
onHideUnderlay={this.props.onHideUnderlay.bind（this）}
onShowUnderlay={this.props.onShowUnderlay.bind（this）}
>
{item}
);
}
}

把你的观点改成这样

        <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 (
                  <CircleButton  
                     onHideUnderlay={this._onHideUnderlay.bind(this)}
                     onShowUnderlay={this._onShowUnderlay.bind(this)}/>
                );
              })}
            </View>
          </View>

{t（“大小”）}
{this.state.productsList[0].size.map（（项，索引）=>{
返回(
);
})}

你能上传你所有的组件代码吗？@VahidBoreiri我更新了它，这是toogle1函数：toggle1（size）{this.setState（{size}）；}你在你的

onPress={（）=>this.toggle1（item）}

中只给它红色的

#EC1C24

。你不能改变它的颜色。您只是在更改大小。不，所有的圆都没有红色边框，我需要在用户单击这些圆时更改样式，仅针对单击的一个圆。我的代码在单击其中一个圆时更改所有圆的样式！：（@OrthoHomeDefenseI只是指出了错误。而不是

style={！this.state.toggle1？{}:{color:#EC1C24}

您需要更改

onPress

事件中该元素的样式不喜欢这样，所有圆圈都没有红色边框，我需要在用户单击其中一个圆圈时更改样式，仅针对单击的一个圆圈。我的代码在单击其中一个圆圈时更改所有圆圈的样式！：（我编辑了答案，加入了一个你如何做到这一点的例子！

        <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 (
                  <CircleButton  
                     onHideUnderlay={this._onHideUnderlay.bind(this)}
                     onShowUnderlay={this._onShowUnderlay.bind(this)}/>
                );
              })}
            </View>
          </View>