我正在Reactjs做一个项目，需要用户输入他们的州和省。我打算自动进行选择，即当用户从JSon数组列表中选择一个状态时，该省将自动填充该状态中的所有省。当您单击省时，您将看到链接到您刚才选择的州的所有省。
但我真的不知道如何实现这一点，因此我来这里寻求帮助。特别是当所有的搜索结果从谷歌和这里也没有给我进展。
my.json示例:
[
{
"id": "1",
"state": "StateOne",
"province": ["A", "B", "C", "D"]
},
{
"id": "2",
"state": "StateTwo",
"province": ["H", "K", "L", "M", "P"]
}
]
我的React文件:
import React, { useState, useContext, useEffect } from "react";
import ContactContext from "../../contact/contactContext";
const ContactForm = () => {
return (
<div>
<div className="main-content">
<div className="col-md-12">
<h4> ADD CONTACT </h4>
</div>
</div>
<hr />
<form onSubmit={onSubmit} onload="resetSelection()">
<div className="row">
<div className="col-md-8">
<div className="row">
<div className="col">
<label className="form-group has-float-label">
<select
className="form-control"
id="stateOfOrigin"
placeholder="state Of Origin"
name=" "
value=""
onChange={onChange}
>
<option> </option>
</select>
<span>state Of Origin</span>
</label>
</div>
<div className="row">
<div className="col">
<label className="form-group has-float-label">
<select
className="form-control"
id="province"
placeholder="province"
name=" "
value=""
onChange={onChange}
>
<option> </option>
</select>
<span>province</span>
</label>
</div>
<div className="col-6">
<button
type="submit"
value={current ? "Update Contact" : "Add Contact"}
className="btn nextBtn btn-cont"
onClick={onSubmit}
>
{current ? "Update Contact" : "Add Contact"}
</button>
</div>
</div>
</form>
</div>
);
};
export default ContactForm;
您可以根据状态ID计算出省数组。这是使用一个函数组件和一个状态钩子，但是对于This.state.stateId或类似的情况，也可以使用相同的思想。
null
const root = document.getElementById("root");
const states = [
{
id: "1",
state: "StateOne",
province: ["A", "B", "C", "D"],
},
{
id: "2",
state: "StateTwo",
province: ["H", "K", "L", "M", "P"],
},
];
const App = () => {
const [stateId, setStateId] = React.useState(null);
const state = states.find((s) => s.id === stateId);
const provinces = state ? state.province : null;
return (
<div>
<div>
Select state:
<select onChange={(e) => setStateId(e.target.value)}>
{states.map((s) => (
<option key={s.id} value={s.id}>
{s.state}
</option>
))}
</select>
</div>
<div>
Select province:
<select disabled={!provinces}>
{(provinces || []).map((p) => (
<option key={p} value={p}>
{p}
</option>
))}
</select>
</div>
</div>
);
};
ReactDOM.render(<App />, root);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>