npm 级联下拉列表-数据集

vfh0ocws 于 2023-06-06 发布在其他

关注(0)|答案(1)|浏览(178)

在我的形式，我想创建级联下拉逻辑将像这样->用户将选择值从1。下拉列表中的值，则第二个下拉列表中的数据将在从2中选择值后更改。下拉数据将在3中更改。下拉。
我的问题是，构建数据集的最佳方法是什么？现在我有3个这样的数组对象->

export const dropdown1 = [
{key: 1, value: 'something'}
]

export const dropdown2 = [
{key: 1, value: 'something else'}
]

export const dropdown3 = [
{key: 1, value: 'something else else'}
]

我已经创建了下拉组件并导入了主组件，在那里可以获取数据，但不知道如何使其级联，并首先尝试figureout这个下拉列的数据集。

npm

来源：https://stackoverflow.com/questions/76371468/cascading-dropdown-dataset

1条答案

按热度按时间

wgx48brx1#

我已经创建了一个React的应用程序，按照您的要求检查下面。

将数组组合成表示层次关系的结构化数据集。
将事件处理程序附加到下拉列表以处理用户交互并触发级联行为。

// Event handler for state selection
  const handleStateChange = event => {
    setSelectedState(event.target.value);
    setSelectedCity('');
  };

// Event handler for city selection
  const handleCityChange = event => {
    setSelectedCity(event.target.value);
  };

我们使用React hooks（useState）来管理所选的州和城市。handleStateChange和handleCityChange函数分别更新所选州和城市。使用Map功能基于所选的州和城市动态填充城市和区域。

下面的代码是为我工作的。

import React, { useState } from 'react';

// Sample dataset for states, cities, and areas
const dataset = [
  { stateKey: 1, stateValue: 'California', cityKey: 1, cityValue: 'Los Angeles', areaKey: 1, areaValue: 'Downtown' },
  { stateKey: 1, stateValue: 'California', cityKey: 1, cityValue: 'Los Angeles', areaKey: 2, areaValue: 'Hollywood' },
  { stateKey: 1, stateValue: 'California', cityKey: 2, cityValue: 'San Francisco', areaKey: 3, areaValue: 'Downtown' },
  { stateKey: 1, stateValue: 'California', cityKey: 2, cityValue: 'San Francisco', areaKey: 4, areaValue: 'Fisherman\'s Wharf' },
  { stateKey: 2, stateValue: 'New York', cityKey: 3, cityValue: 'New York City', areaKey: 5, areaValue: 'Manhattan' },
  { stateKey: 2, stateValue: 'New York', cityKey: 3, cityValue: 'New York City', areaKey: 6, areaValue: 'Brooklyn' },
  // Add more data as needed
];

const DropdownExample = () => {
  const [selectedState, setSelectedState] = useState('');
  const [selectedCity, setSelectedCity] = useState('');

  // Filter cities based on selected state
  const cities = dataset
    .filter(item => item.stateValue === selectedState)
    .map(item => item.cityValue);

  // Filter areas based on selected city
  const areas = dataset
    .filter(item => item.cityValue === selectedCity)
    .map(item => item.areaValue);

  // Event handler for state selection
  const handleStateChange = event => {
    setSelectedState(event.target.value);
    setSelectedCity('');
  };

  // Event handler for city selection
  const handleCityChange = event => {
    setSelectedCity(event.target.value);
  };

  return (
    <div>
      <select value={selectedState} onChange={handleStateChange}>
        <option value="">Select State</option>
        <option value="California">California</option>
        <option value="New York">New York</option>
        {/* Add more state options as needed */}
      </select>

      <select value={selectedCity} onChange={handleCityChange}>
        <option value="">Select City</option>
        {cities.map(city => (
          <option key={city} value={city}>{city}</option>
        ))}
      </select>

      <select>
        <option value="">Select Area</option>
        {areas.map(area => (
          <option key={area} value={area}>{area}</option>
        ))}
      </select>
    </div>
  );
};

export default DropdownExample;

结果：