reactjs中通过省份时如何获取城市答案

【问题标题】：How to get the cities when pass the province in reactjsreactjs中通过省份时如何获取城市
【发布时间】：2018-03-21 16:52:09
【问题描述】：

我是 reactjs 的新手，我希望当我经过一个省时，它会返回它的城市。我尝试 npm 但我不能。我感谢您的帮助。谢谢！

【问题讨论】：

这个问题不仅范围太广，可以通过多种方式回答，而且还不清楚您要问什么，而且质量非常低。请参观或查看帮助中心！谢谢。
@Clijsters ，我的意思是，我有一个下拉列表，可以在哪里选择省份，然后当我选择一个省份时，我希望显示我选择的省份的城市并且也会放在下拉列表中。
哪些省份？在哪里？什么？来自国家？如果是，哪个国家？你的省份数据集来自哪里？哪种下拉菜单？ <select>?等等……

标签： javascript reactjs

【解决方案1】：

我猜一些通用的东西类似于以下链接中的示例： https://codesandbox.io/s/zk3m3n4zzx

我基本上是用状态来存储选择的地址。

const data = {
  provinces: [
    { id: 1, name: 'P1' },
    { id: 2, name: 'P2' },
    { id: 3, name: 'P3' },
    { id: 4, name: 'P4' },
  ],
  cities: [
    { id: 1, name: 'C1', provinceId: 1 },
    { id: 2, name: 'C2', provinceId: 1 },
    { id: 3, name: 'C3', provinceId: 1 },
    { id: 4, name: 'C4', provinceId: 2 },
    { id: 5, name: 'C5', provinceId: 2 },
    { id: 6, name: 'C6', provinceId: 3 },
    { id: 7, name: 'C7', provinceId: 4 },
  ]
};

class Province extends React.Component {
  onSelect = (event) => {
    this.props.onSelect(parseInt(event.target.value));
  }
  render() {
    return (
      <div>
        <span>Province: </span>
        <select onChange={this.onSelect} >
          <option>Select province</option>
          {
            this.props.data.map(prov => (
              <option
                key={prov.id}
                value={prov.id}
                selected={this.props.selectedId === prov.id}>
                {prov.name}
              </option>
            ))
          }
        </select>
      </div>
    );
  }
}

class City extends React.Component {
  onSelect = (event) => {
    this.props.onSelect(parseInt(event.target.value));
  }
  render() {
    return (
      <div>
        <span>City: </span>
        <select onClick={this.onSelect}>
          <option>Select city</option>
          {
            this.props.data.map(city => (
                <option
                  key={city.id}
                  value={city.id}
                  selected={this.props.selectedId === city.id}>
                  {city.name}
                </option>
            ))
          }
        </select>
      </div>
    );
  }
}


class Address extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      provinces: data.provinces,
      provinceId: null,
      cities: data.cities,
      cityId: null
    };
  }

  onSelectProvince = (provId) => {
    const selCities = data.cities.filter(c => c.provinceId === provId);
    this.setState({
      provinceId: provId,
      cities: selCities
    });
  }

  onSelectCity = (city) => {
    this.setState({
      cityId: city.id
    });
  }

  render() {
    return (
      <div>
        <Province
          data={this.state.provinces}
          selectedId={this.state.provinceId}
          onSelect={this.onSelectProvince} />
        <City
          data={this.state.cities}
          selectedId={this.state.cityId}
          onSelect={this.onSelectCity} />
      </div>
    );
  }
}

【讨论】：

谢谢兄弟！我会试试这个
是的，我只是制作另一个城市和省份的文件，然后打电话给他们。谢谢兄弟！