使用React Hooks进行级联下拉

问题描述

嗨，大家好，我是React的新手。我正在尝试使用react钩子和我做的很好的方式来创建级联下拉列表，但是我觉得做起来有问题。请检查此代码，并告诉我有一种方法可以改进我的代码。预先感谢

import React,{ useState } from 'react';
import './App.css';


function App() {

    const[data,setName] = useState({
      countrie:"",state:""
    });


    let state;
    const countrie =['Germany','India','France']

    const gstate = ['Duesseldorf','Leinfelden-Echterdingen','Eschborn']
    const istate = ['Delhi','Kolkata','Mumbai','Bangalore']
    const fstate =['Auvergne','Bretagne','Corse','Centre']

    if(data.countrie==="Germany"){

        state = gstate.map((gstate,key)=> <option key={key} value={gstate}>{gstate}</option>)

     }else if(data.countrie==="India"){

        state = istate.map((istate,key)=> <option key={key} value={istate}>{istate}</option>)

     }else{

       state = fstate.map((fstate,key)=> <option key={key} value={fstate}>{fstate}</option>)
     }

    const countries = countrie.map((countrie,key)=> <option key={key} value={countrie}>{countrie}</option>)


  function handleCountry(e){
    
    setName({...data,countrie:e.target.value});

  }

  function handleStateChange(e){
    
    setName({...data,state:e.target.value});
  }

return (
    <form onSubmit={handleSubmit}>
             <div>
                 <select value={data.countrie} onChange={handleCountry}>
                   {countries}
                 </select>
             </div>

            <div>
          <select value={data.state} onChange={handleStateChange}>
                  {state}
          </select>
            </div>
      <input type="submit" />
    </form>
  );
}

export default App;

解决方法

我最好的建议是更改结合国家和州的数据结构。这样做使得在每个国家/地区映射地图和获取州/州，而不必映射变量要容易得多。这也使它更具可伸缩性。

以下是使用国家/地区数据作为集合的示例：

Codesandbox

import React,{ useState } from "react";

const countriesData = [
  {
    name: "Germany",states: ["Duesseldorf","Leinfelden-Echterdingen","Eschborn"]
  },{
    name: "India",states: ["Delhi","Kolkata","Mumbai","Bangalore"]
  },{
    name: "France",states: ["Auvergne","Bretagne","Corse","Centre"]
  }
];

function Form() {
  const [{ country,state },setData] = useState({
    country: "Germany",state: ""
  });

  const countries = countriesData.map((country) => (
    <option key={country.name} value={country.name}>
      {country.name}
    </option>
  ));

  const states = countriesData.find(item => item.name === country)?.states.map((state) => (
    <option key={state} value={state}>
      {state}
    </option>
  ));

  function handleCountryChange(event) {
    setData(data => ({ state: '',country: event.target.value }));
  }

  function handleStateChange(event) {
    setData(data => ({ ...data,state: event.target.value }));
  }

  return (
    <form onSubmit={() => console.log("Submitted")}>
      <div>
        <select value={country} onChange={handleCountryChange}>
          {countries}
        </select>
      </div>

      <div>
        <select value={state} onChange={handleStateChange}>
          {states}
        </select>
      </div>
      <input type="submit" />
    </form>
  );
}

export default Form;