Блог

Я создаю эту форму администратора, где категория и подкатегория будут выбраны в раскрывающемся списке, а параметры будут из заданного Json (categories.json), и соответствующая подкатегория будет заполнена после выбора категории при создании продукта. например, если я выберу category_slug мужская мода, появится подкатегория, такая как футболка. Как это сделать в React? файл json

 {  "categories": [  {  "id": "1",  "name": "Men's Fashion",  "category_slug": "men's-fashion",  "category_type": "product",  "child_categories": [  {  "id": "2",  "name": "T-Shirt",  "category_slug": "t-shirt"  },  {  "id": "3",  "name": "Panjabi amp; Fatua",  "category_slug": "panjabi-amp;-fatua"  },  {  "id": "4",  "name": "Polo Shirts",  "category_slug": "polo-shirts"  },  {  "id": "5",  "name": "Jeans",  "category_slug": "jeans"  },  {  "id": "6",  "name": "Men's Sweaters ",  "category_slug": "men's-sweaters-"  }  ]  },  {  "id": "7",  "name": "Electronic Device ",  "category_slug": "electronic-device-",  "child_cat": [  {  "id": "8",  "name": "Mobile ",  "category_slug": "mobile-12"  },  {  "id": "9",  "name": "Tablets",  "category_slug": "tablets"  },  {  "id": "10",  "name": "Laptops",  "category_slug": "laptops"  },  {  "id": "11",  "name": "Desktops",  "category_slug": "desktops"  },  {  "id": "12",  "name": "Gaming Consoles",  "category_slug": "gaming-consoles"  },  {  "id": "13",  "name": "Cameras",  "category_slug": "cameras"  },  {  "id": "14",  "name": "Security Cameras",  "category_slug": "security-cameras"  },  {  "id": "15",  "name": "Test",  "category_slug": "test"  }  ]  },  {  "id": "16",  "name": "Electronic Accessories ",  "category_slug": "electronic-accessories-",  "child_cat": [  {  "id": "17",  "name": "Mobile Accessories",  "category_slug": "mobile-accessories"  },  {  "id": "18",  "name": "Wearable",  "category_slug": "wearable"  },  {  "id": "19",  "name": "Console Accessories",  "category_slug": "console-accessories"  },  {  "id": "20",  "name": "Camera Accessories",  "category_slug": "camera-accessories"  },  {  "id": "21",  "name": "Computer Accessories",  "category_slug": "computer-accessories"  },  {  "id": "22",  "name": "Storage",  "category_slug": "storage"  },  {  "id": "23",  "name": "Printers",  "category_slug": "printers"  },  {  "id": "24",  "name": "Computer Components",  "category_slug": "computer-components"  },  {  "id": "25",  "name": "Network Components",  "category_slug": "network-components"  },  {  "id": "26",  "name": "Software",  "category_slug": "software"  }  ]  },  {  "id": "27",  "name": "TV amp; Home Appliances",  "category_slug": "tv-amp;-home-appliances"  },  {  "id": "28",  "name": "Health amp; Beauty",  "category_slug": "health-amp;-beauty",  "child_cat": [  {  "id": "29",  "name": "Bath amp; Body",  "category_slug": "bath-amp;-body"  },  {  "id": "30",  "name": "Beauty Tools",  "category_slug": "beauty-tools"  },  {  "id": "31",  "name": "Fragrances",  "category_slug": "fragrances"  },  {  "id": "32",  "name": "Hair Care",  "category_slug": "hair-care"  },  {  "id": "33",  "name": "Makeup",  "category_slug": "makeup"  },  {  "id": "35",  "name": "Personal Care",  "category_slug": "personal-care"  },  {  "id": "36",  "name": "Skin Care",  "category_slug": "skin-care"  },  {  "id": "5f2a9798e7abc4290b6c6275",  "name": "Medical Supplies",  "category_slug": "medical-supplies"  }  ]  }  ] }  

Форма. Для этого я использовал Чакрауи.

 export default function AddProductForm() {  return (  lt;Box display='flex' justifyContent='center' alignItems='center'gt;  lt;Box  w={[300, 400, 600]}  border='1px'  boxShadow='md'  p={5}  rounded='md'  bg='white'  borderColor='gray.400'  mx='auto'  gt;  lt;FormControl id='product' isRequiredgt;  lt;FormLabelgt;Product Namelt;/FormLabelgt;  lt;Input type='text' /gt;  lt;FormLabelgt;Categorylt;/FormLabelgt;   lt;Selectgt;  lt;optiongt;United Arab Emirateslt;/optiongt;  lt;optiongt;Nigerialt;/optiongt;  lt;/Selectgt;  lt;FormLabelgt;Sub-categorylt;/FormLabelgt;  lt;Selectgt;  lt;optiongt;United Arab Emirateslt;/optiongt;  lt;optiongt;Nigerialt;/optiongt;  lt;/Selectgt;  lt;FormLabelgt;Descriptionlt;/FormLabelgt;  lt;Input type='text' /gt;  lt;FormLabelgt;Imagelt;/FormLabelgt;  lt;Input type='text' /gt;  lt;FormLabelgt;Regular Pricelt;/FormLabelgt;  lt;Input type='number' /gt;  lt;FormLabelgt;Sell Pricelt;/FormLabelgt;  lt;Input type='number' /gt;  lt;FormLabelgt;Stock Quantitylt;/FormLabelgt;  lt;NumberInput max={5} min={1}gt;  lt;NumberInputField /gt;  lt;NumberInputSteppergt;  lt;NumberIncrementStepper /gt;  lt;NumberDecrementStepper /gt;  lt;/NumberInputSteppergt;  lt;/NumberInputgt;  lt;/FormControlgt;  lt;/Boxgt;  lt;/Boxgt;  ); }  

Используйте useState() крючок для отслеживания значения родительского выбора. Для ребенка выберите просто найти родителя по какому-либо уникальному ключу (в вашем случае » id » или «slug») и сопоставьте «дочерние категории» найденного объекта в качестве тега опции.

Ваши ключи JSON также несовместимы, так что исправьте это.

Ваш код должен выглядеть следующим образом:

 export default function Example() {  const [parent, setParent] = useState("");   return (  lt;divgt;  {/* parent */}  lt;select value={parent} onChange={(e) =gt; setParent(e.target.value)}gt;  lt;option value=""gt;lt;/optiongt;  {categories.map((category) =gt; (  lt;option value={category.id}gt;{category.name}lt;/optiongt;  ))}  lt;/selectgt;  {/* child */}  lt;selectgt;  lt;option value=""gt;lt;/optiongt;  {categories  .find((x) =gt; x.id === parent)  ?.child_categories?.map((category) =gt; (  lt;option value={category.id}gt;{category.name}lt;/optiongt;  ))}  lt;/selectgt;  lt;/divgt;  ); }