如何將此級聯下拉列表 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鈎子來管理你的狀態，我只是想告訴你如何轉換你的組件。