如何在第二个自动完成输入中获取特定数据，这取决于在 React.js 中的第一个输入中键入的内容？

Question

好吧，我想我不知道如何正确表达我的简单问题，因为它是多么简单，我猜。

基本上，我在我的 React 项目中完成了一个自动完成功能。我有两个输入“国家”和“城市”。当我输入一个国家/地区时，我的自动完成功能很好，可以给我建议，但现在我必须为我的第二个输入做同样的事情，所以它会给我一个城市列表，这取决于在“国家”输入中输入的国家...

“英国”=>“伦敦、伯明翰、拜顿等”

我该怎么做？谢谢！

附：我已经有了所有国家和城市的列表，我只是不知道如何使第二个输入依赖于第一个中的信息。

代码在这里

自动完成.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

附：我已经有了所有国家和城市的列表，我只是不知道如何使第二个输入依赖于第一个中的信息。

如果您知道该城市属于哪个国家/地区（可能通过城市对象中的键），您可以运行一个简单的 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"))

---

更新

1. 使您的Form 组件有状态。

2. 在Form 中为countries 添加一个状态属性（让它成为countryId）。

3. 将此属性作为道具传递给第二个Autocomplete 组件。

4. 当第一个Autocomplete 更改时，更改Form 的countryId。