如何根據 React.js 中選定的國家/地區下拉列表填充 State 下拉數據？

Question

我現在有兩個下拉列表，第一個是country ，第二個是state ，我想根據所選country填充 state 下拉列表。

完整代碼 url: https://codesandbox.io/s/nt54t6

這是我的代碼：-

 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> </> ) }

感謝您的努力！

Answer 1

您必須動態設置值。

腳步：

1. 創建一個變量來保存選定的國家

const [selectedCountry, setSelectedCountry] = useState("");

2. 創建一個onChange處理程序以更新選定的國家/地區

onChange={(event) => setSelectedCountry(event.target.value)}

3. 在其上創建一個useEffect以便您可以跟蹤更改
4. 在此，循環body並過濾出對國家有效的狀態。 將它們設置為 state

useEffect(() => {
  const newStates = body.filter(
    ({ country_name }) => country_name === selectedCountry
  );
  setState(newStates);
}, [selectedCountry]);

更新沙盒