Question

我有一个像这样的JSON文件：

[
  {
    "city": "Adana",
    "plaka": 1,
    "districts": [
      "Aladağ",
      "Ceyhan",
      "Çukurova",
      "Feke",
      "İmamoğlu",
      "Karaisalı",
      "Karataş",
      "Kozan",
      "Pozantı",
      "Saimbeyli",
      "Sarıçam",
      "Seyhan",
      "Tufanbeyli",
      "Yumurtalık",
      "Yüreğir"
    ]
  },
  {
    "city": "Adıyaman",
    "plaka": 2,
    "districts": [
      "Besni",
      "Çelikhan",
      "Gerger",
      "Gölbaşı",
      "Kahta",
      "Merkez",
      "Samsat",
      "Sincik",
      "Tut"
    ]
  }
 ]

我想使用此JSON文件，但无法连接选择器。这是我的第一个选择器：

<Picker
        selectedValue={this.state.selectedCity}
        onValueChange={(itemValue) => {
            this.setState({ selectedCity: itemValue });
        }}
    >
    {this.props.cities.map(city => {
        return (
            <Picker.Item label={city.city} value={city.city} key={city.plaka} />
        );
    })}
</Picker>

city是我的对象，city.city是我的城市名称。

如果我将城市对象作为值传递给Picker.Item，则选择器始终显示“ Adana”城市。

Answer 1

<Picker
    selectedValue={this.state.selectedCity.plaka}
    onValueChange={(itemValue) => {
        this.setState({ selectedCity: itemValue });
    }}
>
{this.props.cities.map(city => {
    return (
        <Picker.Item label={city.city} value={city.city} key={city.plaka} />
    );
})}

Answer 2

首先，采用三个变量 selectedCity 用于存储所选城市的名称， selectedCityIndex 用于存储所选城市的索引和 selectedDistrict >将存储所选区域的名称。

在您的构造函数中使用它：

constructor(props) {
        super(props);
        this.state = {
            selectedCity: '',
            selectedCityIndex: 0, //by default selected index is 0
            selectedDistrict: '',
        };
    }

然后在渲染方法中，在城市和地区之间进行映射。请参见下面的代码，它可能会对您有所帮助。

 render() {
        return (
            <View>
                <Picker
                    selectedValue={this.state.selectedCity}
                    onValueChange={(itemValue, itemIndex) => {
                        this.setState({
                            selectedCity: itemValue,
                            selectedCityIndex: itemIndex
                        });
                    }}
                >
                    {this.state.cities.map(city => {
                        return (
                            <Picker.Item label={city.city} value={city.city} key={city.plaka} />
                        );
                    })}
                </Picker>
                <Picker
                    selectedValue={this.state.selectedDistrict}
                    onValueChange={(itemValue, itemIndex) => {
                        this.setState({
                            selectedDistrict: itemValue,
                        });
                    }}
                >
     //render district list based on selected city
                    {this.props.cities.length > 0 && this.props.cities[this.state.selectedCityIndex].districts.map(district => {
                        return (
                            <Picker.Item label={district} value={district} key={district} />
                        );
                    })}
                </Picker>
            </View>
        );
    }

如何在React-Native中将两个选择器连接为城市区？

2 个答案: