如何在Payload CMS中实现主分类关联的子分类动态选择功能？

完全可以实现子分类选项随主分类选择动态变化，下面分两种常见场景给出具体实现：

一、原生React状态管理实现 #

通过React的useState保存选中的主分类，根据选中值过滤对应子分类：

import { useState } from 'react';

export const PRODUCT_CATEGORIES = [
  {
    label: 'UI Kits',
    value: 'ui_kits' as const,
    subcat: [{name:'ui_kits1',value:'ui_kits1' as const},{name:'ui_kits2',value:'ui_kits2' as const}],
  },
  {
    label: 'Fonts',
    value: 'fonts' as const,
    subcat: [{name:'1',value:'lu1n1d' as const},{name:'font2',value:'font2' as const}],
  },
];

function CategorySelector() {
  // 存储选中的主分类值
  const [selectedCategory, setSelectedCategory] = useState<string | undefined>();

  // 根据选中主分类获取对应子分类选项
  const getSubcategoryOptions = () => {
    if (!selectedCategory) return [];
    const matchedCategory = PRODUCT_CATEGORIES.find(cat => cat.value === selectedCategory);
    return matchedCategory?.subcat?.map(sub => ({ label: sub.name, value: sub.value })) || [];
  };

  return (
    <div>
      <label>主分类</label>
      <select
        value={selectedCategory}
        onChange={(e) => setSelectedCategory(e.target.value)}
      >
        <option value="">请选择主分类</option>
        {PRODUCT_CATEGORIES.map(cat => (
          <option key={cat.value} value={cat.value}>{cat.label}</option>
        ))}
      </select>

      {/* 选中主分类后才显示子分类选择器 */}
      {selectedCategory && (
        <>
          <label>子分类</label>
          <select>
            <option value="">请选择子分类</option>
            {getSubcategoryOptions().map(sub => (
              <option key={sub.value} value={sub.value}>{sub.label}</option>
            ))}
          </select>
        </>
      )}
    </div>
  );
}

二、React Hook Form配置化表单实现 #

如果使用配置化表单库（如React Hook Form），可以通过watch方法监听主分类字段变化，动态生成子分类选项：

import { useForm, Controller } from 'react-hook-form';
import { PRODUCT_CATEGORIES } from './constants';

function ProductForm() {
  const { control, watch } = useForm();
  // 监听主分类字段的选中值
  const selectedCategory = watch('category');

  // 动态生成子分类选项列表
  const subcategoryOptions = selectedCategory 
    ? PRODUCT_CATEGORIES.find(cat => cat.value === selectedCategory)?.subcat?.map(sub => ({ label: sub.name, value: sub.value })) || []
    : [];

  return (
    <form>
      <Controller
        name="category"
        control={control}
        rules={{ required: true }}
        render={({ field }) => (
          <>
            <label>Category</label>
            <select {...field}>
              <option value="">请选择</option>
              {PRODUCT_CATEGORIES.map(cat => (
                <option key={cat.value} value={cat.value}>{cat.label}</option>
              ))}
            </select>
          </>
        )}
      />

      {/* 选中主分类后渲染子分类选择器 */}
      {selectedCategory && (
        <Controller
          name="subcat"
          control={control}
          render={({ field }) => (
            <>
              <label>Subcategory</label>
              <select {...field}>
                <option value="">请选择</option>
                {subcategoryOptions.map(sub => (
                  <option key={sub.value} value={sub.value}>{sub.label}</option>
                ))}
              </select>
            </>
          )}
        />
      )}
    </form>
  );
}

核心逻辑说明 #

不管使用哪种方式，核心都是：

• 监听主分类的选中值变化
• 根据选中值从PRODUCT_CATEGORIES中匹配对应的子分类列表
• 将匹配到的子分类列表渲染到子分类选择器中

如果使用其他UI组件库（如Ant Design的Select），只需替换对应的表单组件，核心逻辑保持一致。

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