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

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，选择器总是显示“阿达纳”城市。

Answer 1

首先取三个变量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>
        );
    }

Answer 2

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