javascript - 如何将这个级联下拉选择从 Class 转换为 React 中的功能挂钩?
问题描述
我有这个国家、州和 LGA 的级联选择下拉列表。我想将它转换为 React 中的功能组件。我试过但没有成功。当用户选择一个国家时
构造函数部分如下。我认为这适用于 useState 或类似的东西。请参阅下面的部分:
constructor(props) {
super(props);
this.state = {
countries : [],
states : [],
lgas : [],
selectedCountry : '--Choose Country--',
selectedState : '--Choose State--'
};
this.changeCountry = this.changeCountry.bind(this);
this.changeState = this.changeState.bind(this);
}
componentDidMount 具有来自 Country、State 和 LGA 的数据。但我认为在单独的文件中会更好。但我不知道如何将其映射到主文件。请参阅下面的示例数据。
componentDidMount() {
this.setState({
countries : [
{ name: 'Nigeria', value: 'nigeria',
states: [ {name: 'Abia', value: 'abia',
lgas: [
{name: "Aba", value: 'aba'},
{name: "Oru", value: 'oru'},
]}, {name: 'Adamawa', value: 'adamawa',
lgas: [
{name: 'Demsa', value: 'demsa'},
{name: 'Fufure', value: 'fufure'},
]},
},
]
});
}
然后是 Country 和 States 的 changeValue 函数。如何将其转换为 React 函数式 Hooks?请参阅下面的示例。
changeCountry(event) {
this.setState({selectedCountry: event.target.value});
this.setState({states : this.state.countries.find(cntry => cntry.name === event.target.value).states});
}
changeState(event) {
this.setState({selectedState: event.target.value});
const stats = this.state.countries.find(cntry => cntry.name === this.state.selectedCountry).states;
this.setState({lgas : stats.find(stats => stats.name === event.target.value).lgas});
}
已编辑 我尝试将 Ali Muhammad 提交的代码连接到表单区域,但没有成功。我把它包括在下面。请帮我调查一下。
<div id="container">
<h2>Cascading or Dependent Dropdown using React</h2>
<div>
<Label>Country</Label>
<Select placeholder="Country" value={state.selectedCountry} onChange={changeCountry}>
<option>--Choose Country--</option>
{state.countries.map((e, key) => {
return <option key={key}>{e.name}</option>;
})}
</Select>
</div>
<div>
<Label>State</Label>
<Select placeholder="State" value={state.selectedState} onChange={changeState}>
<option>--Choose State--</option>
{state.states.map((e, key) => {
return <option key={key}>{e.name}</option>;
})}
</Select>
</div>
<div>
<Label>LGA</Label>
<Select placeholder="LGA" value={state.selectedLga}>
<option>--Choose LGA--</option>
{state.lgas.map((e, key) => {
return <option key={key}>{e.name}</option>;
})}
</Select>
</div>
</div>
代码托管在CodeSandbox.io主文件是 LocationDropdown.js
解决方案
const [state, setState] = useState({
countries : [],
states : [],
lgas : [],
selectedCountry : '--Choose Country--',
selectedState : '--Choose State--'
});
将您的componentDidMount
代码移入useEffect
useEffect(() => {
setState(prevState => ({
...prevState,
countries : [
{ name: 'Nigeria', value: 'nigeria',
states: [ {name: 'Abia', value: 'abia',
lgas: [
{name: "Aba", value: 'aba'},
{name: "Oru", value: 'oru'},
]}, {name: 'Adamawa', value: 'adamawa',
lgas: [
{name: 'Demsa', value: 'demsa'},
{name: 'Fufure', value: 'fufure'},
]},
},
]
}));
}, [])
然后是你的处理程序:
function changeCountry(event) {
setState(prevState => ({
...prevState,
selectedCountry: event.target.value,
states : prevState.countries.find(cntry => cntry.name === event.target.value).states
}));
}
function changeState(event) {
setState(prevState => {
const stats = prevState.countries.find(cntry => cntry.name === prevState.selectedCountry).states;
return {
...prevState,
selectedState: event.target.value,
lgas : stats.find(sts => sts.name === event.target.value).lgas
}
));
}
但是你应该使用多个状态或useReducer
钩子来管理你的状态,我只是想告诉你如何转换你的组件。
推荐阅读
- wordpress - WordPress Advanced Custom Fields Img Src(Unknown)
- python - 在 django 中使用 forrm.py 将登录用户 ID 自动保存为外键
- android - 我需要添加 kapt "com.android.databinding:compiler:$compiler_version" gradle 条目吗?
- javascript - 日历服务:使用 PropertiesService 存储和检索事件
- excel - 加权平均 Excel
- c++ - VS2019 C++ 控制台应用程序 - 调试器将不接受命令参数
- javascript - 使用 Angular 的 HTTPClient 在 API 请求的可重用函数中确定适当的 HTTP 方法
- unix - AIX 中的退出代码状态与 ansible 的管道
- spss - SPSS 中位数,平均 - 在 P5 和 P95 之间
- python - 在 Windows 机器上用 python 获取视频设备列表