Question

我在我的代码中创建动态选择器，选择器的数量基于我的可配置Array下的响应。我能够创建选择器但我面临的问题是如果我更新任何选择器它重置的值所有的选择器立刻，我知道当我调用setState函数时，再次调用Render方法按照当前状态值管理项目，但它是我在项目中的要求，所以任何人都可以建议我这样做，它＆对我来说非常关键。

这里是我的代码： -

loadData(item) {
    return item.options.map(user => (
      <Picker.Item label={user.label} value={user.id} />
    ))
  }

  renderConfigurableProductDetail() {
      array = this.props.ProductDetailState.productData.configurable;
    {
    return array.map((item) => {
    if(item.label!="Size"){
      return <View style={{ flex: 1, backgroundColor: "white", flexDirection: "column", marginTop: 8 }}>
        <CustomText style={{ fontSize: 16, fontFamily: "futuraLigtBt", marginLeft: 6, paddingLeft: 15, paddingRight: 15, paddingTop: 5, paddingBottom: 5 }}>
          {item.label}
        </CustomText>
        <Picker
          selectedValue={this.state.selectedDropDownValue}
          onValueChange={(itemValue, itemIndex) => this.onClickDropdown(itemValue,itemIndex)}>
          {this.loadData(item)}
        </Picker>
      </View>;
    }
    })
  }
  };

onClickDropdown(data,index){
    alert(data+" "+index)
    this.setState({ selectedDropDownValue: data});
  }

第二种方法： -

loadData(item) {
    return item.options.map(user => (
      <Picker.Item label={user.label} value={user.id} />
    ))
  }

  renderConfigurableProductDetail() {
    let array=[];
    if (CustomConfigArray.length>0){
      array = CustomConfigArray;
    }else{
      array = this.props.ProductDetailState.productData.configurable;
    }
    return array.map((item,i) => {
    if(item.label!="Size"){
      return <View style={{ flex: 1, backgroundColor: "white", flexDirection: "column", marginTop: 8 }}>
        <CustomText style={{ fontSize: 16, fontFamily: "futuraLigtBt", marginLeft: 6, paddingLeft: 15, paddingRight: 15, paddingTop: 5, paddingBottom: 5 }}>
          {item.label}
        </CustomText>
        <Picker
          selectedValue={this.state.selectedDropDownValue[i]}
          onValueChange={(itemValue, itemIndex) => this.onClickDropdown(itemValue,itemIndex)}>
          {this.loadData(item)}
        </Picker>

      </View>;
    }
    })
  };

onClickDropdown(value,index){
    let selectValue = this.state.selectedDropDownValue;
    selectValue[index] = value;
    this.setState({
      selectedDropDownValue: selectValue
    });
  }

可配置数组： -

"configurable": [{
              "id": "142",
              "code": "size",
              "label": "Size",
              "options": [{
                "attribute_id": "142",
                "atribute_code": "size",
                "id": "171",
                "label": "XL",
                "products": [
                  "2071",
                  "2074"
                ]
              }, {
                "attribute_id": "142",
                "atribute_code": "size",
                "id": "172",
                "label": "L",
                "products": [
                  "2072"
                ]
              }]
            },
            {
              "id": "93",
              "code": "color",
              "label": "Color",
              "options": [{
                "attribute_id": "93",
                "atribute_code": "color",
                "id": "50",
                "label": "Blue",
                "products": [
                  "2071"
                ]
              },
              {
                "attribute_id": "93",
                "atribute_code": "color",
                "id": "60",
                "label": "Black",
                "products": [
                  "2072"
                ]
              }, {
                "attribute_id": "93",
                "atribute_code": "color",
                "id": "64",
                "label": "Cyna",
                "products": [
                  "2072"
                ]
              }, {
                "attribute_id": "93",
                "atribute_code": "color",
                "id": "61",
                "label": "White",
                "products": [
                  "2071",
                  "2074"
                ]
              }
              ]
            },
            {
              "id": "148",
              "code": "format",
              "label": "Format",
              "options": [{
                "attribute_id": "148",
                "atribute_code": "format",
                "id": "102",
                "label": "Download",
                "products": [
                  "2072",
                  "2071",
                  "2074"
                ]
              },
              {
                "attribute_id": "148",
                "atribute_code": "format",
                "id": "103",
                "label": "File",
                "products": [
                  "2071",
                  "2074"
                ]
              }
              ]
            }
            ]

如果有办法实现这一点，请告诉我，我Goggled很多，但没有发现任何适合我的代码。所以我来这里寻求你的帮助

此致

Answer 1

你很亲密，但并不完全。每次更改值时，都会覆盖所有选择器的状态值。要解决此问题，请考虑进行以下更改。

// load selectedDropDownValue data from state with the item's id
// pass the item value to the change function
<Picker
  selectedValue={this.state.selectedDropDownValue[item.id]}
  onValueChange={(itemValue, itemIndex) => this.onClickDropdown(itemValue, itemIndex, item)}
>
  {this.loadData(item)}
</Picker>

onClickDropdown(data, index, item){
  // save each items selected data with their id
  this.setState((prevState) => {
    const { selectedDropDownValue } = Object.assign({}, prevState.selectedDropDownValue, { [item.id]: data});
    return { selectedDropDownValue };
  });
}

Answer 2

我遇到了同样的问题，但无法使用上述解决方案解决。如果我在OnClickDropDown中管理“ item.id”，则它是最后一个“ Picker”的ID。

<View style={styles.inputContainer}>
                <Text style={{fontSize: 16, fontWeight: 'bold'}}>
                  {obj.cmdParams[key].title}
                </Text>
                <Picker
                  selectedValue={this.state.selectedDropDownValue[item.id]? 
     this.state.selectedDropDownValue[item.id]: ''}
                  onValueChange={(itemValue, itemIndex) =>
                    this.onClickDropdown(itemValue, itemIndex, item)
                  }>
                  {this.renderPicker(item.options.default)}
                </Picker>
              </View>

     renderPicker(options) {
     return options.map(obj => {
    return <Picker.Item label={obj.label} value={obj.value} />;
     });
    }
   onClickDropdown(data, index, item) {
// save each items selected data with their id
  this.setState((prevState) => {
    const { selectedDropDownValue } = Object.assign({}, 
  prevState.selectedDropDownValue, { [item.id]: data});
    return { selectedDropDownValue };
  });
  console.log(item.id)
}

处理循环中的动态选择器的点击反应原生

2 个答案: