显示与表格中所选国家相关的城市答案

【问题标题】：Show Cities Related to Country Selected on Form显示与表格中所选国家相关的城市
【发布时间】：2021-06-26 15:54:29
【问题描述】：

在这里使用 repo：https://github.com/country-regions/country-region-data/blob/master/data.js 我正在尝试绘制与该国家/地区相关的国家和城市。如果有人有任何建议，我不确定如何处理这个问题。

我想要这样，如果用户选择一个国家，如果有意义的话，城市字段只显示与该国家相关的区域？

这是我目前下面的代码，我使用地图来绘制国家/地区。但我不确定如何从所选国家/地区绘制区域？

<IonItem>
  <IonLabel position={"stacked"}>Country</IonLabel>
  <IonSelect interface="popover" value={values.country} name="country" placeholder="Select A Country" onIonChange={handleInputChange}>
      {countries.map((country) => (
          <IonSelectOption value={country.countryName} key={country.countryShortCode}>{country.countryName}</IonSelectOption>
      ))};
  </IonSelect>
</IonItem>
<IonItem>
  <IonLabel position={"stacked"}>City</IonLabel>
  <IonSelect interface="popover" value={values.city} name="city" placeholder="Select A City" onIonChange={handleInputChange}>
      {countries.map((country) => (
          <IonSelectOption value={country.countryName} key={country.countryShortCode}>{country.countryName}</IonSelectOption>
      ))};
  </IonSelect>
</IonItem>

【问题讨论】：

标签： javascript reactjs typescript dictionary ionic-framework

【解决方案1】：

我建议创建另一个状态变量以包含所选国家/地区的区域。然后，在函数handleInputChange中，您可以将所选国家的地区分配给变量。

例子：

function handleInputChange(e) {
    const { value, name } = e.currentTarget;

    if (name === 'country') {
       const selectedCounty = countries.find(county => country.countryName === value);
       setRegions(selectedCounty.regions);
    }

}

------------ 其余代码--------

<IonItem>
  <IonLabel position={"stacked"}>Country</IonLabel>
  <IonSelect interface="popover" value={values.country} name="country" placeholder="Select A Country" onIonChange={handleInputChange}>
      {countries.map((country) => (
          <IonSelectOption value={country.countryName} key={country.countryShortCode}>{country.countryName}</IonSelectOption>
      ))};
  </IonSelect>
</IonItem>
<IonItem>
  <IonLabel position={"stacked"}>City</IonLabel>
  <IonSelect interface="popover" value={values.city} name="city" placeholder="Select A City" onIonChange={handleInputChange}>
      {regions.map((region) => (
          <IonSelectOption value={region.name} key={region.shortCode}>{region.name}</IonSelectOption>
      ))};
  </IonSelect>
</IonItem>

【讨论】：

【解决方案2】：

你的 JSX：

{countries.map((country) => (
          <IonSelectOption value={country.countryName} key={country.countryShortCode}>{country.countryName}</IonSelectOption>
      ))};

创建您的选项，因此您只需更改countries 即可更改这些选项。为此，您可以创建一个状态变量：

const [citiesForCountries, setCitiesForCountries] = useState([]);

改用它：

    {citiesForCountries.map((country) => ( // make options

然后，将onChange 处理程序添加到第一个（即国家/地区）IonSelect，以便每当它发生变化时，您都会更新 cityForCountries：

const onChange = e => {
  const selectedCountry = countries.find(country => country.countryName === e.target.value);
  const newCitiesForCountries = selectectedCountry.cities;
  setCitiesForCountries(newCitiesForCountries);
}

注意：上面的代码假设每个国家对象都有一个“城市”属性。如果不是，您的更改处理程序将需要使用您的数据来查找newCitiesForCountries。

【讨论】：