如何将这种从级联的下拉列表选择转换为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);
    }

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

然后是国家和州的changeValue函数。如何将其转换为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上，主文件是LocationDropdown.js

Answer 1

const [state, setState] = useState({
            countries : [],
            states : [],
            lgas : [],
            selectedCountry : '--Choose Country--',
            selectedState : '--Choose State--'
        });