处理循环内动态选择器的点击反应本机

Question

我正在我的代码中创建动态选择器，选择器的数量基于我可配置下的响应 Array.I 我能够创建选择器但是我面临的问题是如果我更新任何选择器它立即重置所有选择器的值，我知道当我调用 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 了很多但没有找到任何适合我的 code.So 我在这里寻求你的帮助

此致

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

处理循环内动态选择器的点击反应本机

Handling clicks of Dynamic pickers inside loop react-native

javascript

picker

reactjs

react-native