如何在 React js 中创建 3 个（国家、州和城市）下拉菜单以相互填充数据

Question

我想创建 3 个下拉菜单，例如国家、州、城市。根据国家选项中的选择，它应该填充州，并且根据国家和州选择的选项，城市下拉应该在 react js 中填充自己。提前致谢

我想在美国国家/地区添加更多州

  componentDidMount() {
    this.setState({
      countries: [
        {
          name: "Germany",
          states: [
            {
              name: "A",
              cities: ["Duesseldorf", "Leinfelden-Echterdingen", "Eschborn"]
            }
          ]
        },
        { name: "Spain", states: [{ name: "B", cities: ["Barcelona"] }] },

        { name: "USA", states: [{ name: "C", cities: ["Downers Grove"] }] },
        {
          name: "Mexico",
          states: [{ name: ["D", "F", "H"], cities: ["Puebla"] }]
        },
        {
          name: "India",
          states: [
            { name: "E", cities: ["Delhi", "Kolkata", "Mumbai", "Bangalore"] }
          ]
        }
      ]
    });
  }

  changeCountry(event) {
    this.setState({ selectedCountry: event.target.value });
    this.setState({
      states: this.state.countries.find(
        (cntry) => cntry.name === event.target.value
      ).states
    });
  }

  changeState(event) {
    this.setState({ selectedState: event.target.value });
    const stats = this.state.countries.find(
      (cntry) => cntry.name === this.state.selectedCountry
    ).states;
    this.setState({
      cities: stats.find((stat) => stat.name === event.target.value).cities
    });
  }

我想在一个国家/地区显示更多州和城市（3 个下拉菜单）

  render() {
    return (
      <div id="container">
        <h2>Cascading or Dependent Dropdown using React</h2>

        <div>
          <label>Country</label>
          <select
            placeholder="Country"
            value={this.state.selectedCountry}
            onChange={this.changeCountry}
          >
            <option>--Choose Country--</option>
            {this.state.countries.map((e, key) => {
              return <option key={key}>{e.name}</option>;
            })}
          </select>
        </div>

        <div>
          <label>State</label>
          <select
            placeholder="State"
            value={this.state.selectedState}
            onChange={this.changeState}
          >
            <option>--Choose State--</option>
            {this.state.states.map((e, key) => {
              return <option key={key}>{e.name}</option>;
            })}
          </select>
        </div>

        <div>
          <label>City</label>
          <select placeholder="City">
            <option>--Choose City--</option>
            {this.state.cities.map((e, key) => {
              return <option key={key}>{e}</option>;
            })}
          </select>
        </div>
      </div>
    );
  }
}

Answer 1

您的解决方案是朝着好的方向发展的。虽然你可以简化它。这是一个使用 React Hooks 的示例。

https://codesandbox.io/s/sweet-monad-kzp3p?file=/src/App.js

我们从创建 3 个状态开始：

  const [selectedCountry, setSelectedCountry] = React.useState();
  const [selectedState, setSelectedState] = React.useState();
  const [selectedCity, setSelectedCity] = React.useState();

  const availableState = data.countries.find((c) => c.name === selectedCountry);
  const availableCities = availableState?.states?.find(
    (s) => s.name === selectedState
  );

通常它们的值为undefined。每次您在下拉列表中进行选择时，我们都可以更新它们。更新后，我们可以使用data 找到对应的states（在availableState）。如果选择了一个状态，我们可以使用该属性来查找该状态的cities。

?.states 是一个空检查。所以如果availableState还没有设置，我们就不会尝试调用它上面的任何函数。

这样，我们可以使用相同的属性来渲染和查找正确的数据。消除了很多更新的复杂性。

渲染看起来像这样：

return (
    <div id="container">
      <h2>Cascading or Dependent Dropdown using React</h2>

      <div>
        <label>Country</label>
        <select
          placeholder="Country"
          value={selectedCountry}
          onChange={(e) => setSelectedCountry(e.target.value)}
        >
          <option>--Choose Country--</option>
          {data.countries.map((value, key) => {
            return (
              <option value={value.name} key={key}>
                {value.name}
              </option>
            );
          })}
        </select>
      </div>

      <div>
        <label>State</label>
        <select
          placeholder="State"
          value={selectedState}
          onChange={(e) => setSelectedState(e.target.value)}
        >
          <option>--Choose State--</option>
          {availableState?.states.map((e, key) => {
            return (
              <option value={e.name} key={key}>
                {e.name}
              </option>
            );
          })}
        </select>
      </div>

      <div>
        <label>City</label>
        <select
          placeholder="City"
          value={selectedCity}
          onChange={(e) => setSelectedCity(e.target.value)}
        >
          <option>--Choose City--</option>
          {availableCities?.cities.map((e, key) => {
            return (
              <option value={e.name} key={key}>
                {e}
              </option>
            );
          })}
        </select>
      </div>
    </div>
  );