我正在創建這個管理表單，其中類別和子類別將是下拉選擇，選項將來自給定的 Json (categories.json)，并且在創建產品時選擇類別后將填充相應的子類別。例如，如果我選擇category_slug men's fashion，則將出現諸如t-shirt 之類的子類別。如何在 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 & Fatua",
"category_slug": "panjabi-&-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 & Home Appliances",
"category_slug": "tv-&-home-appliances"
},
{
"id": "28",
"name": "Health & Beauty",
"category_slug": "health-&-beauty",
"child_cat": [
{
"id": "29",
"name": "Bath & Body",
"category_slug": "bath-&-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"
}
]
}
]
}
表格。我為此使用了 chakraUI。
export default function AddProductForm() {
return (
<Box display='flex' justifyContent='center' alignItems='center'>
<Box
w={[300, 400, 600]}
border='1px'
boxShadow='md'
p={5}
rounded='md'
bg='white'
borderColor='gray.400'
mx='auto'
>
<FormControl id='product' isRequired>
<FormLabel>Product Name</FormLabel>
<Input type='text' />
<FormLabel>Category</FormLabel>
<Select>
<option>United Arab Emirates</option>
<option>Nigeria</option>
</Select>
<FormLabel>Sub-category</FormLabel>
<Select>
<option>United Arab Emirates</option>
<option>Nigeria</option>
</Select>
<FormLabel>Description</FormLabel>
<Input type='text' />
<FormLabel>Image</FormLabel>
<Input type='text' />
<FormLabel>Regular Price</FormLabel>
<Input type='number' />
<FormLabel>Sell Price</FormLabel>
<Input type='number' />
<FormLabel>Stock Quantity</FormLabel>
<NumberInput max={5} min={1}>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</FormControl>
</Box>
</Box>
);
}
uj5u.com熱心網友回復：
使用useState()鉤子跟蹤父選擇的值。對于子選擇，只需通過某個唯一鍵（在您的情況下為“id”或“slug”）找到父項，并將找到的物件的“child_categories”映射為 Option 標簽。
您的 JSON 密鑰也不一致，因此請修復該問題。
您的代碼應如下所示：
export default function Example() {
const [parent, setParent] = useState("");
return (
<div>
{/* parent */}
<select value={parent} onChange={(e) => setParent(e.target.value)}>
<option value=""></option>
{categories.map((category) => (
<option value={category.id}>{category.name}</option>
))}
</select>
{/* child */}
<select>
<option value=""></option>
{categories
.find((x) => x.id === parent)
?.child_categories?.map((category) => (
<option value={category.id}>{category.name}</option>
))}
</select>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351797.html
標籤：javascript 反应 脉轮
上一篇：縮放時不觸發onZoom
下一篇：在條件中使用多個else塊