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

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",
                    }
                ]
            }
        ]

Step2：定义状态

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

第三步：

主要渲染：

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)，我得到了正确的数据。

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

标签： react-nativereact-native-android

Answer 1

json数据存在一些不匹配。两者都应该有一个 key label或name。

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

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