Question

好的，所以我想我不知道如何正确表达我的简单问题。

基本上，我在我的React项目中完成了一次自动填充。.我有两个输入“ Country”和“ City”。当我输入国家/地区时，我的自动填充功能非常有效，可以为我提供建议，但是现在我必须在第二次输入中输入相同的内容，因此它将为我提供一个城市列表，具体取决于在“国家/地区”输入中输入哪个国家/地区... / p>

“英国” =>“伦敦，伯明翰，布顿等”

我该怎么做？谢谢！

P.S。我已经有了所有国家和城市的清单，我只是不知道如何根据第一项中的信息进行第二项输入。

此处代码

Autocomplete.jsx https://github.com/lembas-cracker/Weather-app/blob/master/src/Autocomplete.jsx

Form.jsx https://github.com/lembas-cracker/Weather-app/blob/master/src/Form.jsx

Answer 1

P.S。我已经有了所有国家和城市的清单，我只是不知道如何根据第一项中的信息进行第二项输入。

如果您知道城市属于哪个国家（也许通过城市对象中的键），则可以运行简单的filter函数来删除不属于该国家的任何城市。

this.state = {
    selectedCountry: 'London',
};

const cities = [
    { name: "Toronto", country: "Canada" },
    { name: "London", country: "United Kingdom" }
];

const filteredCities = cities.filter(city => {
    return city.country !== this.state.selectedCountry;
});

请确保在您的城市输入字段上创建一个onBlur函数，以便在用户离开该输入字段后在您的城市列表上运行过滤器。

Answer 2

举个简单的例子。你是说这样的意思吗？由于您没有提供源代码的任何部分，因此我在演示中使用了纯HTML select。

https://jsfiddle.net/arfeo/n5u2wwjg/204186/

class App extends React.Component {
    constructor() {
    super();

    this.state = {
        countryId: 1,
    };
  }

  onCountryChange(countryId) {
    this.setState({ countryId: parseInt(countryId) });
  }

    render() {
    return (
        <div>
        <Input
          key="countriesInput"
          type="countries"
          countryId={this.state.countryId}
          onChange={(countryId) => this.onCountryChange(countryId)}
        />
        <Input
          key="citiesInput"
          type="cities"
          countryId={this.state.countryId}
        />
      </div>
    );
  }
}

class Input extends React.Component {
    constructor() {
    super();

    this.selectRef = null;
  }

    renderOptions() {
    const countries = [
        {
        id: 1,
        name: 'England',
      },
      {
        id: 2,
        name: 'Germany',
      },
      {
        id: 3,
        name: 'France',
      },
    ];

    const cities = [
        {
        countryId: 1,
        cities: [
            {
            id: 1,
            name: 'London',
          },
            {
            id: 2,
            name: 'Liverpool',
          },
          {
            id: 3,
            name: 'Salisbury'
          }
        ],
      },
      {
        countryId: 2,
        cities: [
            {
            id: 4,
            name: 'Berlin',
          },
          {
            id: 5,
            name: 'Frankfurt',
          },
        ],
      },
      {
        countryId: 3,
        cities: [
            {
            id: 6,
            name: 'Paris',
          },
        ],
      },
    ];

    switch (this.props.type) {
        case 'countries': {
        return countries.map((country) => (
          <option
            key={country.id.toString()}
            value={country.id}
          >
            {country.name}
          </option>
        ));
      }
        case 'cities': {
        const citiesMap = cities.filter((city) => city.countryId === this.props.countryId);

        if (citiesMap && citiesMap[0]) {
            const citiesList = citiesMap[0].cities;

          if (citiesList) {
            return citiesList.map((city) => (
              <option
                key={city.id.toString()}
                value={city.id}
              >
                {city.name}
              </option>
            ));
          }
        }

        return null;
      }
      default: return null;
    }
  }

    render() {
    return (
        <select name={this.props.type} ref={(ref) => this.selectRef = ref} onChange={() => this.props.onChange(this.selectRef.value)}>
        {this.renderOptions()}
      </select>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

更新

使您的Form组件处于有状态。
在countries中为Form添加一个状态属性（将其设为countryId）。
将此属性作为道具传递给第二个Autocomplete组件。
当第一个Autocomplete更改时，请更改countryId中的Form。

如何在第二个自动完成输入中获取特定数据，具体取决于React.js中第一个输入的类型？

2 个答案: