React省市区选择器开发问题：如何基于本地JSON数据源实现选中省份后动态展示对应地区

Hey there! Let's get that province-district dropdown working properly. The issue right now is your district select is hardcoded to only show Istanbul's districts, no matter which province you pick. Let's fix this with a few simple changes using React state.

Step 1: Add State to Track the Selected Province #

First, we need to keep track of which province the user has selected. We'll use React's useState hook for this. Add this at the top of your component:

import { useState } from 'react';

// Inside your component
const [selectedProvince, setSelectedProvince] = useState(null);

Step 2: Update the handleProvince Function to Save the Selected Province #

Right now, your handleProvince is probably just getting the province name from the dropdown's value. Instead, let's grab the full province object so we can access its districts directly. Modify your province select and handler:

// Update the handleProvince function
const handleProvince = (e) => {
  // Find the selected province object from the Provinces array
  const province = Provinces.find(p => p.il === e.target.value);
  setSelectedProvince(province);
};

// Update the province select element
<select onChange={(e) => handleProvince(e)}>
  <option key={0} value={0}> Lütfen bir İl seçiniz </option>
  {Provinces.map((province) => (
    <option key={province.plaka} value={province.il}>
      {province.il}
    </option>
  ))}
</select>

Step 3: Render Districts Based on the Selected Province #

Now, instead of looping through all provinces and checking for Istanbul, we'll use the selectedProvince state to render only the districts of the chosen province. Update your district select:

<div className="flex items-center px-2">
  <label for="cars">İlçe Seçiniz:</label>
  <select>
    {/* Show a default option if no province is selected */}
    <option key="default" value="">Lütfen önce bir İl seçiniz</option>
    {/* If a province is selected, map through its districts */}
    {selectedProvince?.ilceleri?.map((district) => (
      <option key={district} value={district}>
        {district}
      </option>
    ))}
  </select>
</div>

Full Modified Code #

Putting it all together, your component should look something like this:

import { useState } from 'react';
// Import your Provinces JSON data here
import Provinces from './path-to-your-provinces.json';

const ProvinceDistrictSelector = () => {
  const [selectedProvince, setSelectedProvince] = useState(null);

  const handleProvince = (e) => {
    const province = Provinces.find(p => p.il === e.target.value);
    setSelectedProvince(province);
  };

  return (
    <div>
      <div className="flex items-center px-2">
        <label for="cars">İl Seçiniz:</label>
        <select onChange={(e) => handleProvince(e)}>
          <option key={0} value={0}> Lütfen bir İl seçiniz </option>
          {Provinces.map((province) => (
            <option key={province.plaka} value={province.il}>
              {province.il}
            </option>
          ))}
        </select>
      </div>
      <div className="flex items-center px-2">
        <label for="cars">İlçe Seçiniz:</label>
        <select>
          <option key="default" value="">Lütfen önce bir İl seçiniz</option>
          {selectedProvince?.ilceleri?.map((district) => (
            <option key={district} value={district}>
              {district}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

export default ProvinceDistrictSelector;

Key Changes Explained #

• We added selectedProvince state to store the full province object when the user selects one.
• The handleProvince function now finds the matching province from your JSON data and saves it to state.
• The district dropdown now conditionally renders districts only if a province is selected, using optional chaining (?.) to avoid errors when no province is chosen.

That should get your dropdowns working in perfect联动! 🚀

内容的提问来源于stack exchange，提问作者okangulsevil