Реагировать JS - Как я могу показать 2 выпадающих и показать данные из статического JSON

Question

Я новичок в React JS. У меня 2 выпадающих списка: Страна и Город.Я хочу показать город, основанный на стране, с помощью статического json. Кто-нибудь может мне помочь с этим?

 [
  {
    "id": "1",
    "country": "India",
    "cities": [
      {
        "id": "01",
        "cityName": "Delhi"
      },
      {
        "id": "02",
        "cityName": "Mumbai"
      },
      {
        "id": "03",
        "cityName": "Pune"
      }
    ]
  },
  {
    "id": "2",
    "country": "Canada",
    "cities": [
      {
        "id": "01",
        "cityName": "Toronto"
      },
      {
        "id": "02",
        "cityName": "Ottawa"
      },
      {
        "id": "03",
        "cityName": "Winnipeg"
      }
    ]
  }
]

import * as React from 'react'; import * as styles from './App.module.scss'; const App = () => { return ( <div className={styles.app}> <div> <span>Country: </span> <select> <option>Select Country</option> </select> </div> <div> <span>City: </span> <select> <option>Select Country</option> </select> </div> </div> ); }; export default App;

Answer 1

Попробуйте что-нибудь подобное и передайте данные в качестве реквизита.Вы должны рефакторинг по мере необходимости и сделать более общий.

class SelectComponent extends Component {

  state = {country: 0, cityName: 0};

  clicked = () => { console.log("clicked") };

  handleChange = (key, ev) => {
    let newState = { [key]: parseInt(ev.target.value) };

    //reset city to 0 if country changes
    if(key !== "cityName") {
        newState.cityName = 0;
    }

    this.setState(newState);
  };

  render() {

    const { data } = this.props;

    const select = (title, data, fieldName) => {
        return (
            <div>
                <span>{title}:</span>
                <select onChange={(event) => this.handleChange(fieldName, event)}>
                    {data.map((value, key) =>
                      <option value={key}
                              selected={this.state[fieldName] === key}
                      >
                        {value[fieldName]}
                      </option>)
                    }
                </select>
            </div>);
  };

    return (
        <div className={styles.app}>
            {
                [select("Country", data, "country"), select("City", data[this.state.country].cities, "cityName")]
            }
        </div>
    );
  }
};

Live Preview

Answer 2

просто установите метод на onchange для dropdown страны и в этом методе отфильтруйте город по выбранной стране

const data = "your JSon"
@computed get countries(){
.map(item => {
return <option key ={item.country.id}> {item.country.name} </option>
}
}
let cities : [];

@computed get cities(){
if(this.cities == null || this.cities == undefined)
return null;

this.cities.map(item => {
return <option key ={item.id}> {item.name} </option>
}
}

countryChange(){
this.cities = data.filter(item => {return item.country === "your value"})[0].cities
}

<select onchange= {this.countryChange}> {this.countries} </select>
<select onchange= > {this.cities } </select>