javascript - 级联选择在 Reactjs React-hook-form 中不起作用

Question

我是 Reactjs 的新手，并试图实现级联下拉菜单，以便当用户选择状态时，他将能够在下一个下拉菜单中获得相应的城市。

预期结果：对于州：马哈拉施特拉邦 -> 城市：那格浦尔、浦那

这是我在data.js中的数据结构

let arr = [
  {
    "state": "Maharashtra",
    "state_code": "mh",
    "cities": [
      {
        "name": "Nagpur",
        "code": "ng"
      },
      {
        "name": "Pune",
        "code": "pu"
      }
    ]
  },
  {
    "state": "Punjab",
    "state_code": "pj",
    "cities": [
      {
        "name": "Chandigarh",
        "code": "hd"
      },
      {
        "name": "Patiala",
        "code": "pt"
      }
    ]
  },
  {
    "state": "Jharkhand",
    "state_code": "jk",
    "cities": [
      {
        "name": "Ranchi",
        "code": "rc"
      },
      {
        "name": "Dhanbad",
        "code": "db"
      }
    ]
  },
  {
    "state": "Telangana",
    "state_code": "ts",
    "cities": [
      {
        "name": "Hyderabad",
        "code": "hd"
      },
      {
        "name": "Amravati",
        "code": "am"
      }
    ]
  }
]

export default arr;

这是我的组件component.js

import React from "react";
import "../styles/App.scss";
import { useForm } from "react-hook-form";
import classNames from "classnames";
import arr from "../../src/data"


let finalCities = [];

...

const getCity = (evt) => {
    console.log(evt.target.value);


    arr.forEach(x => {
      if (x.state == evt.target.value) {
        console.log(x.cities);
        finalCities = x.cities
      }
    })

  }

...

    return(
<div>
                  <div className="form-group">
                    <select className="custom-select" name="state" {...register("address.state")} onSelect={getCity}>
                      {arr.map((e, key) => {
                        return <option key={key} value={e.value}>{e.state}</option>;
                      })}
                    </select>
                  </div>
    
                  {/* finalCities */}
                  <div className="form-group">
                    <label htmlFor="City">City</label>
                    <select  value={finalCities} className="custom-select" name="address.city" {...register("address.city")}>
                      {finalCities.map((e) => {
                        return <option key={e} value={e}>{e}</option>;
                      })}
                      {/* {finalCities} */}
                    </select>
                  </div>
</div>
    
    )

标签： javascriptreactjsreact-hook-formcascadingdropdown

Answer 1

这不是 React 钩子或表单的问题。了解反应中状态的概念。

import React, { useState } from "react";
import arr from "../data";

const About = () => {
  const StateList = arr;
  let citiesList = [];

  const [cities, setCities] = useState([]);
  const [stateName, setstateName] = useState(arr[0].state);
  const [cityName, setcityName] = useState();

  const getCities = (event) => {
    console.log("State:" + event.target.value);
    for (let i = 0; i < StateList.length; i++) {
      if (StateList[i].state == "" + event.target.value)
        citiesList = StateList[i].cities;
    }
    console.log("cityList" + citiesList);
    setCities(citiesList);
    setstateName(event.target.value);
    setcityName(citiesList[0].name);
  };

  const refreshCityName = (event) => {
    setcityName(event.target.value);
  };

  return (
    <div>
      <div>
        <h2>City List</h2>
        <select name="StateList" onChange={getCities}>
          {StateList.map((e, key) => {
            return (
              <option key={key} value={e.state}>
                {e.state}
              </option>
            );
          })}
        </select>
        {stateName}
      </div>
      <h2> Cities</h2>
      <div>
        <select name="CityList" onChange={refreshCityName}>
          {cities.map((e, key) => {
            return (
              <option key={key} value={e.name}>
                {e.name}
              </option>
            );
          })}
        </select>
        {cityName}
      </div>
    </div>
  );
};

    export default About;