Question

这是我的步骤：

Json代码：

"features": [
            {
                "name": "size",
                "selected": null,
                "values": [
                    {
                        "value": "40",
                        "label": "40",
                    },
                    {
                        "value": "41",
                        "label": "41",
                    }
                ]
            },
            {
                "label": "color",
                "selected": "gray",
                "values": [
                    {
                        "value": "gray",
                        "label": "gray"
                    },
                    {
                        "value": "black",
                        "label": "black",
                    }
                ]
            }
        ]

第二步：定义状态

constructor(props) {
    super(props);
    this.state ={selectedDropDownValue:[]};
}

第3步：

主要渲染：

render{
    return(
        {this.printPickers()}
    );
}

和

printPickers(){

    const listItems = data.map((obj,index) =>

        <Item picker key={'mykey1' + index}>
            <Picker
                selectedValue={(this.state.selectedDropDownValue[obj.label]) ?this.state.selectedDropDownValue[obj.label] : obj.selected}
                onValueChange={(itemValue, itemIndex, itemName) =>this.pickerChange(itemIndex,itemValue,obj.name)}
                >
                {
                    obj1.values.map( (v)=>{
                        return <Picker.Item key={'mykey2' + index} label={v.label} value={v.value} />
                    })
                }
            </Picker>
        </Item>

    );
    return (<View>{listItems}</View>);
  }

最后：

pickerChange(itemIndex,itemValue,itemName){

      this.setState({
          selectedDropDownValue: Object.assign(this.state.selectedDropDownValue, {[itemName]: itemValue})
      });

  }

我的问题是我无法通过触摸它们来更改每个选择器的选项，但是使用console.log(this.state.selectedDropDownValue)可以得到正确的数据。

Answer 1

json数据不匹配。两者都应具有键标签或名称。

因此，假设两个项目的键都为 label ，那么您需要像这样更新您的pickerChange函数调用：

this.pickerChange(itemIndex,itemValue,obj.label)

如何在react-native的循环内创建动态选择器？

1 个答案: