如何解决使用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;
解决方法
我最好的建议是更改结合国家和州的数据结构。这样做使得在每个国家/地区映射地图和获取州/州,而不必映射变量要容易得多。这也使它更具可伸缩性。
以下是使用国家/地区数据作为集合的示例:
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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。