我们如何根据 React 中选择的州过滤城市

Question

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const statesAndCities = [
    { state: "Telangana", cities: ["Hyderabad", "Warangal"] },
    { state: "Madhya Pradesh", cities: ["Gwalior", "Bhopal"] },
    { state: "Rajasthan", cities: ["Jaipur", "Jaipur City"] },
    { state: "Chattisgarh", cities: ["Raipur", "ABC"] }
  ];
  const [value, setvalue] = useState([]);
  const [city, setcity] = useState([]);

  const handleChange = (e) => {
    setvalue(e.target.value);
    setcity(statesAndCities.find((state) => state === e.target.value));
    console.log(e.target.value);
  };

  return (
    <div className="App">
      <select onChange={handleChange}>
        {statesAndCities.map((elem) => {
          return <option value={elem.state}>{elem.state}</option>;
        })}
      </select>
      <select onChange={handleChange}>
        {statesAndCities.map((elem) => {
          return <option value={elem.cities}>{elem.cities}</option>;
        })}
      </select>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

我们如何根据 React 中选择的州来过滤城市。根据所选州的显示城市的处理更改，我需要编写什么逻辑

Answer 1

你可以尝试这样做：

  const [firstSelectValue, setFirstSelectValue] = useState('');
  const [cities, setCities] = useState([]);

  const handleChange = (e) => {
    setFirstSelectValue(e.target.value);
    const selectedState = statesAndCities.find(el => el.state === e.target.value);
    setCities(selectedState.cities)
  };

在第二个选择中，您可以绘制这些城市的地图：

  <select onChange={citiesOnChange}>
        {cities.map((city) => 
          <option value={city}>{city}</option>;
        )}
  </select>

您还需要为第二个选择创建状态以及用于处理此选择的更改的函数。