我必須創建一個選擇串列以在選擇中顯示某些產品。該串列應顯示產品名稱，但應以粗體文本計數，如下所示：
我嘗試過的是我正在創建一系列產品并將我的產品與產品一起推入其中，并像這樣計數：
productInformation.push(currentProdName " (" cnt " Product" ")");
之后，我將其映射到 json 并將其系結到選擇串列，如下所示：
var jsonProducts = productInformation.map(function (key, value) {
return { value: key, label: key }
});
<Select id="productName" name="productName" options={jsonProducts}
onChange={onSelectChange}
placeholder={"All Products (" supplierProducts.length ")"}
ref={productInputRef}
styles={{menu: provided => ({ ...provided, zIndex: 9999 }) }} />
但是通過這樣做，我得到了這樣的結果：
我怎樣才能使計數和產品文本加粗？
uj5u.com熱心網友回復：
從 Mui 庫中匯入“ MenuItem ”并像使用任何其他標簽一樣使用它。
但在你應該清理代碼的某些部分之前
productInformation.push({currentProdName, cnt});
var jsonProducts = productInformation.map(function (prod) {
return <MenuItem value={prod.currentProdName " (" prod.cnt " Product" ")"}>{prod.currentProdName}<b> { "(" prod.cnt " Product" ")"}</b></MenuItem>
});
<Select id="productName" name="productName" onChange={onSelectChange}
placeholder={"All Products (" supplierProducts.length ")"}
ref={productInputRef}
styles={{menu: provided => ({ ...provided, zIndex: 9999 }) }} >
{jsonProducts}
</Select>
如您所見，您必須在MenuItem中填充資料，然后將物件添加到 Select。
我更改了將資訊推送到productInformation陣列中的方式（為了更好地控制）
注意：我從選項中洗掉了 jsonProducts并進入了Select標記的內部。
uj5u.com熱心網友回復：
我在 MUI 和 React 方面稍微超出了我的專業領域，但類似于：（請注意，我無法訪問您在p.count此處的原始 JSON/JavaScript 物件，但也許您可以使用它：
<CustomSelect>
<StyledOption value={}>"All Products ({supplierProducts.length})"</StyledOption>
{jsonProducts.map((p) => (
<StyledOption value={c.value}>
{p.label} <span style="font-weight:bold;">({p.count}) Products</span>
</StyledOption>
))}
</CustomSelect>
參考：https ://mui.com/components/selects/
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/448319.html
標籤：javascript jQuery 反应 材料-ui 材料-ui-x
上一篇：如何獲得此警報以停止回圈？
下一篇：SVG按鈕切換