React Native Dropdown Picker分类联动功能实现咨询

核心思路 #

用两个DropdownPicker组件，第一个展示所有父分类，第二个根据第一个选中的分类，动态过滤出对应子项。

步骤实现 #

1. 提取父分类选项

从你提供的items数组中，提取所有不重复的父分类值，转换成Dropdown Picker需要的label/value格式：

// 提取唯一父分类并转为下拉选项
const parentCategories = Array.from(new Set(items.map(item => item.parent))).map(category => ({
  label: category.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' '),
  value: category
}));
// 示例："form_works" 转为 label: "Form Works", value: "form_works"

2. 状态管理

用React的useState管理选中的父分类及子项列表：

import { useState, useEffect } from 'react';
import DropDownPicker from 'react-native-dropdown-picker';

// 父分类选中状态
const [selectedCategory, setSelectedCategory] = useState(null);
// 子项列表状态
const [childItems, setChildItems] = useState([]);
// 下拉展开状态（组件要求）
const [openParent, setOpenParent] = useState(false);
const [openChild, setOpenChild] = useState(false);

3. 动态过滤子项

监听父分类选中值变化，实时过滤对应子项：

// 父分类切换时更新子项列表
useEffect(() => {
  if (selectedCategory) {
    const filtered = items.filter(item => item.parent === selectedCategory);
    setChildItems(filtered);
  } else {
    setChildItems([]);
  }
}, [selectedCategory]);

4. 完整组件代码

import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';

export const items = [
  { label: "Cement", value: "cement", parent: "form_works" },
  { label: "Steel Rebar", value: "steel_rebar", parent: "steel_works"  },
  { label: "Coco Lumber", value: "coco_lumber", parent: "form_works"  },
  { label: "Sand", value: "sand", parent: "masonry_works"  },
  { label: "Gravel", value: "gravel", parent: "masonry_works"  },
  { label: "Plywood", value: "plywood", parent: "form_works"  },
  { label: "Concrete Mix", value: "concrete_mix", parent: "masonry_works"  },
  { label: "Paint", value: "paint", parent: "architectural_works"  },
  { label: "Nails", value: "nails", parent: "form_works"  },
  { label: "Bricks", value: "bricks", parent: "masonry_works"  },
];

const InventoryDropdown = () => {
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [childItems, setChildItems] = useState([]);
  const [openParent, setOpenParent] = useState(false);
  const [openChild, setOpenChild] = useState(false);

  // 生成父分类下拉选项
  const parentCategories = Array.from(new Set(items.map(item => item.parent))).map(category => ({
    label: category.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' '),
    value: category
  }));

  // 父分类切换时更新子项
  useEffect(() => {
    if (selectedCategory) {
      const filtered = items.filter(item => item.parent === selectedCategory);
      setChildItems(filtered);
    } else {
      setChildItems([]);
    }
  }, [selectedCategory]);

  return (
    <View style={styles.container}>
      {/* 父分类下拉选择器 */}
      <DropDownPicker
        open={openParent}
        value={selectedCategory}
        items={parentCategories}
        setOpen={setOpenParent}
        setValue={setSelectedCategory}
        placeholder="选择父分类"
        style={styles.dropdown}
        dropDownContainerStyle={styles.dropdownContainer}
      />

      {/* 子项下拉选择器（未选父分类时禁用） */}
      <DropDownPicker
        open={openChild}
        value={null}
        items={childItems}
        setOpen={setOpenChild}
        setValue={(value) => { /* 这里可绑定子项选中状态 */ }}
        placeholder="选择子项"
        style={styles.dropdown}
        dropDownContainerStyle={styles.dropdownContainer}
        disabled={!selectedCategory}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    gap: 12,
  },
  dropdown: {
    backgroundColor: '#fafafa',
  },
  dropdownContainer: {
    backgroundColor: '#fafafa',
  },
});

export default InventoryDropdown;

关键说明 #

• 父分类的label做了格式化处理，将下划线分隔的单词转为首字母大写形式，提升用户体验
• 子项下拉在未选中父分类时设置为disabled，避免无效操作
• 如果需要保存子项的选中值，给第二个DropDownPicker的setValue绑定对应状态即可

内容的提问来源于stack exchange，提问作者user30137419