如何将此级联下拉列表 select 从 Class 转换为 React 中的功能挂钩？

Question

我有这个级联的 select 下拉列表，state 和 LGA。 我想将它转换为 React 中的功能组件。 我试过但没有成功。 当用户 select 一个国家

构造函数部分如下。 我认为这适用于 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 的数据。 但我认为在单独的文件中会更好。 但我不知道如何将 map 放到主文件中。 请参阅下面的示例数据。

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

Answer 1

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

在useEffect中移动您的componentDidMount代码

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