级联 Select 在 Reactjs React-hook-form 中不起作用
Cascading Select not working in Reactjs React-hook-form
我是 Reactjs 的新手,正在尝试实现级联下拉菜单,这样当用户 select 声明他将能够在下一个下拉菜单中获得相应的城市。
预期结果:州:马哈拉施特拉邦 -> 城市:那格浦尔、浦那
这是我在data.js
中的数据结构
let arr = [
{
"state": "Maharashtra",
"state_code": "mh",
"cities": [
{
"name": "Nagpur",
"code": "ng"
},
{
"name": "Pune",
"code": "pu"
}
]
},
{
"state": "Punjab",
"state_code": "pj",
"cities": [
{
"name": "Chandigarh",
"code": "hd"
},
{
"name": "Patiala",
"code": "pt"
}
]
},
{
"state": "Jharkhand",
"state_code": "jk",
"cities": [
{
"name": "Ranchi",
"code": "rc"
},
{
"name": "Dhanbad",
"code": "db"
}
]
},
{
"state": "Telangana",
"state_code": "ts",
"cities": [
{
"name": "Hyderabad",
"code": "hd"
},
{
"name": "Amravati",
"code": "am"
}
]
}
]
export default arr;
这是我的组件 component.js
import React from "react";
import "../styles/App.scss";
import { useForm } from "react-hook-form";
import classNames from "classnames";
import arr from "../../src/data"
let finalCities = [];
...
const getCity = (evt) => {
console.log(evt.target.value);
arr.forEach(x => {
if (x.state == evt.target.value) {
console.log(x.cities);
finalCities = x.cities
}
})
}
...
return(
<div>
<div className="form-group">
<select className="custom-select" name="state" {...register("address.state")} onSelect={getCity}>
{arr.map((e, key) => {
return <option key={key} value={e.value}>{e.state}</option>;
})}
</select>
</div>
{/* finalCities */}
<div className="form-group">
<label htmlFor="City">City</label>
<select value={finalCities} className="custom-select" name="address.city" {...register("address.city")}>
{finalCities.map((e) => {
return <option key={e} value={e}>{e}</option>;
})}
{/* {finalCities} */}
</select>
</div>
</div>
)
不是 React hook 或表单的问题。了解 React 中状态的概念。
import React, { useState } from "react";
import arr from "../data";
const About = () => {
const StateList = arr;
let citiesList = [];
const [cities, setCities] = useState([]);
const [stateName, setstateName] = useState(arr[0].state);
const [cityName, setcityName] = useState();
const getCities = (event) => {
console.log("State:" + event.target.value);
for (let i = 0; i < StateList.length; i++) {
if (StateList[i].state == "" + event.target.value)
citiesList = StateList[i].cities;
}
console.log("cityList" + citiesList);
setCities(citiesList);
setstateName(event.target.value);
setcityName(citiesList[0].name);
};
const refreshCityName = (event) => {
setcityName(event.target.value);
};
return (
<div>
<div>
<h2>City List</h2>
<select name="StateList" onChange={getCities}>
{StateList.map((e, key) => {
return (
<option key={key} value={e.state}>
{e.state}
</option>
);
})}
</select>
{stateName}
</div>
<h2> Cities</h2>
<div>
<select name="CityList" onChange={refreshCityName}>
{cities.map((e, key) => {
return (
<option key={key} value={e.name}>
{e.name}
</option>
);
})}
</select>
{cityName}
</div>
</div>
);
};
export default About;
我是 Reactjs 的新手,正在尝试实现级联下拉菜单,这样当用户 select 声明他将能够在下一个下拉菜单中获得相应的城市。
预期结果:州:马哈拉施特拉邦 -> 城市:那格浦尔、浦那
这是我在data.js
中的数据结构let arr = [
{
"state": "Maharashtra",
"state_code": "mh",
"cities": [
{
"name": "Nagpur",
"code": "ng"
},
{
"name": "Pune",
"code": "pu"
}
]
},
{
"state": "Punjab",
"state_code": "pj",
"cities": [
{
"name": "Chandigarh",
"code": "hd"
},
{
"name": "Patiala",
"code": "pt"
}
]
},
{
"state": "Jharkhand",
"state_code": "jk",
"cities": [
{
"name": "Ranchi",
"code": "rc"
},
{
"name": "Dhanbad",
"code": "db"
}
]
},
{
"state": "Telangana",
"state_code": "ts",
"cities": [
{
"name": "Hyderabad",
"code": "hd"
},
{
"name": "Amravati",
"code": "am"
}
]
}
]
export default arr;
这是我的组件 component.js
import React from "react";
import "../styles/App.scss";
import { useForm } from "react-hook-form";
import classNames from "classnames";
import arr from "../../src/data"
let finalCities = [];
...
const getCity = (evt) => {
console.log(evt.target.value);
arr.forEach(x => {
if (x.state == evt.target.value) {
console.log(x.cities);
finalCities = x.cities
}
})
}
...
return(
<div>
<div className="form-group">
<select className="custom-select" name="state" {...register("address.state")} onSelect={getCity}>
{arr.map((e, key) => {
return <option key={key} value={e.value}>{e.state}</option>;
})}
</select>
</div>
{/* finalCities */}
<div className="form-group">
<label htmlFor="City">City</label>
<select value={finalCities} className="custom-select" name="address.city" {...register("address.city")}>
{finalCities.map((e) => {
return <option key={e} value={e}>{e}</option>;
})}
{/* {finalCities} */}
</select>
</div>
</div>
)
不是 React hook 或表单的问题。了解 React 中状态的概念。
import React, { useState } from "react";
import arr from "../data";
const About = () => {
const StateList = arr;
let citiesList = [];
const [cities, setCities] = useState([]);
const [stateName, setstateName] = useState(arr[0].state);
const [cityName, setcityName] = useState();
const getCities = (event) => {
console.log("State:" + event.target.value);
for (let i = 0; i < StateList.length; i++) {
if (StateList[i].state == "" + event.target.value)
citiesList = StateList[i].cities;
}
console.log("cityList" + citiesList);
setCities(citiesList);
setstateName(event.target.value);
setcityName(citiesList[0].name);
};
const refreshCityName = (event) => {
setcityName(event.target.value);
};
return (
<div>
<div>
<h2>City List</h2>
<select name="StateList" onChange={getCities}>
{StateList.map((e, key) => {
return (
<option key={key} value={e.state}>
{e.state}
</option>
);
})}
</select>
{stateName}
</div>
<h2> Cities</h2>
<div>
<select name="CityList" onChange={refreshCityName}>
{cities.map((e, key) => {
return (
<option key={key} value={e.name}>
{e.name}
</option>
);
})}
</select>
{cityName}
</div>
</div>
);
};
export default About;