如何将这个级联下拉选择从类转换为 React 中的函数式钩子?

Question

我有这个国家、州和 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);
}

组件DidMount具有来自国家，州和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'},
]}, 
},  
]
});
}

然后，国家/地区和州的变化值函数。如何将其转换为 React 函数式钩子？请参阅下面的示例。

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});
}

已编辑我试图将阿里穆罕默德提交的代码连接到表单区域，但它不起作用。 我把它包括在下面。请帮我调查一下。

<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 主文件是位置下拉列表.js

Answer 1

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钩子来管理你的状态，我只是想告诉你如何转换你的组件。