React.js中如何根据选中的Country下拉框填充State下拉框数据？

问题描述 #

我有两个下拉框，第一个是国家（country）下拉框，第二个是州（state）下拉框，需要根据选中的国家动态填充州下拉框的选项。

现有代码 #

import React, { useState, useEffect } from "react";
import "./styles.css";
import { TextField, MenuItem } from "@mui/material";


export default function App() {
  const body = [
    {
      state_ID: 1,
      state: "Delhi",
      country_ID: 1,
      country_name: "India"
    },
    {
      state_ID: 2,
      state: "Mumbai",
      country_ID: 1,
      country_name: "India"
    },
    {
      state_ID: 3,
      state: "Calgary",
      country_ID: 2,
      country_name: "Canada"
    },
    {
      state_ID: 4,
      state: "Toronto",
      country_ID: 2,
      country_name: "Canada"
    }
  ];
  const [country, setCountry] = useState([]);
  const [state, setState] = useState([]);

  const uniqValues = [
    ...new Map(body.map((item) => [item['country_name'], item])).values(),
];
  useEffect(()=>{
    setCountry(uniqValues);
    setState(body);
 },[])

  return (
        <>
          <TextField 
            className="ruleContainer" 
            select
            name="Country"
            label="Country"
            variant="outlined"
            size="small"
            // onChange={(event) =>
            //   handleChangeInput(inputField.id, event)
            // }
          >
            {country ?
               country.map((opt) => (
                 <MenuItem key={opt.country_name} value={opt.country_name}>
                   {opt.country_name}
                 </MenuItem>
               ))
               : ""}
          </TextField>              
          <TextField
            className="ruleContainer"
            select
            name="state"
            label="State"
            variant="outlined"
            size="small"
            value=""
            // onChange={(event) =>
            //   handleChangeInput(inputField.id, event)
            // }
           >
            {state? 
              state.map((opt) => (
                <MenuItem key={opt.state} value={opt.state}>
                  {opt.state}
                </MenuItem>
               ))
            : ""}
          </TextField>
        </>
        )
}

解决方案 #

要实现联动效果，需做以下核心修改：

1. 新增选中状态管理：添加selectedCountry状态记录当前选中的国家。
2. 绑定下拉框 onChange 事件：选中国家时更新selectedCountry，触发联动逻辑。
3. 动态过滤州数据：依赖selectedCountry的变化，从原始数据中筛选对应国家的州选项。

修改后的完整代码：

import React, { useState, useEffect } from "react";
import "./styles.css";
import { TextField, MenuItem } from "@mui/material";

export default function App() {
  const body = [
    {
      state_ID: 1,
      state: "Delhi",
      country_ID: 1,
      country_name: "India"
    },
    {
      state_ID: 2,
      state: "Mumbai",
      country_ID: 1,
      country_name: "India"
    },
    {
      state_ID: 3,
      state: "Calgary",
      country_ID: 2,
      country_name: "Canada"
    },
    {
      state_ID: 4,
      state: "Toronto",
      country_ID: 2,
      country_name: "Canada"
    }
  ];
  const [country, setCountry] = useState([]);
  const [state, setState] = useState([]);
  // 新增选中国家的状态
  const [selectedCountry, setSelectedCountry] = useState("");

  const uniqValues = [
    ...new Map(body.map((item) => [item["country_name"], item])).values()
  ];

  useEffect(() => {
    setCountry(uniqValues);
  }, []);

  // 监听选中国家变化，动态更新州选项
  useEffect(() => {
    if (selectedCountry) {
      setState(body.filter(item => item.country_name === selectedCountry));
    } else {
      setState([]); // 未选中国家时清空州选项
    }
  }, [selectedCountry, body]);

  return (
    <>
      <TextField
        className="ruleContainer"
        select
        name="Country"
        label="Country"
        variant="outlined"
        size="small"
        value={selectedCountry}
        onChange={(event) => setSelectedCountry(event.target.value)}
      >
        {country.map((opt) => (
          <MenuItem key={opt.country_name} value={opt.country_name}>
            {opt.country_name}
          </MenuItem>
        ))}
      </TextField>
      <TextField
        className="ruleContainer"
        select
        name="state"
        label="State"
        variant="outlined"
        size="small"
        value=""
      >
        {state.map((opt) => (
          <MenuItem key={opt.state} value={opt.state}>
            {opt.state}
          </MenuItem>
        ))}
      </TextField>
    </>
  );
}

关键修改说明 #

• 核心状态selectedCountry：作为联动的触发源，记录用户当前选中的国家。
• 联动逻辑：通过useEffect监听selectedCountry的变化，每次变化时从原始数据中过滤出对应国家的州数据，更新state状态。
• 事件绑定：给国家下拉框绑定onChange事件，实时更新选中状态，触发州下拉框的选项更新。

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