javascript - 在 map 中 react 原生特定样式元素

Question

我有这段代码可以生成来自 API 的大小按钮，比如 (al, l, m, s ...)，当用户点击一个圆圈时我需要放置一个特定的样式，我试过这段代码但是它为所有圆圈制作相同的样式，我需要在单击它时更改一个圆圈的样式:

<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)}
                        style={
                          !this.state.pressStatus
                            ? styles.sizes
                            : styles.sizesAlt
                        }
                        onHideUnderlay={this._onHideUnderlay.bind(this)}
                        onShowUnderlay={this._onShowUnderlay.bind(this)}
                      >
                        <Text
                          key={index}
                          style={
                            !this.state.toggle1 ? {} : { color: "#EC1C24" }
                          }
                        >
                          {item}
                        </Text>
                      </TouchableOpacity>
                    );
                  })}
                </View>
              </View>

结果我拖了图片

Answer 1

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

至于样式，它们是 2 种语法:

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

或

  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>
   );
 }
}

然后将您的 View 更改为类似这样的内容

        <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>