3 天以来，我一直在尝试编写一个通用代码，它允许我们选择一些选项，例如衬衫的尺寸、颜色、材料等，如果没有这样的选项，那么这个按钮就是禁用，但一半有效。谁能帮助我，也许是建议或什么？下面是我的代码。
function ConfigurableFilters ({ handleChangeConfig, configurablesData, state }) {
const isDisabled = (e, code) => {
let products = [...e.products];
for(let attr of configurablesData.attributes) {
if(attr.code === code) {
break
}
products = products.filter(prod => state.selectedConfigs[attr.code].products.includes(prod))
state.selectedConfigs[attr.code].id)
}
return !products.length
}
return (
<div className="configurable-attributes">
{
configurablesData.attributes.map((attr) => {
if (attr.options.length > 1) {
if (attr.code !== 'color') {
return (
<div className="attr_fms attr_space">
<div className="attr_label_size">{attr.label}</div>
{
attr.code !== 'color'
&& attr.options.length > 0
&& !attr.options[0].swatch_value
&& (
<div className="other-list-main-fms">
{attr.options.map((e, i) => {
return (
<label
htmlFor={attr.code + e.id}
key={i}
id={e.id + attr.code}
>
<span className="other-list__input">
<span className="other-radio__body">
<input
id={attr.code + e.id}
className="other-radio__input"
type="radio"
name={attr.code}
value={e.id}
checked={state.selectedConfigs[attr.code].id === e.id}
onChange={() => {
handleChangeConfig(
e.products,
attr.id,
attr.code,
e,
)
}}
disabled={isDisabled(e, attr.code)}
/>
</span>
</span>
<span className="other-list__title">
{e.label}
</span>
</label>
)
})}
</div>
)}
</div>
)
} else {
return (
<div className="attr_color_fms attr_space">
<div className="attr_label_size">{attr.label}</div>
{
attr.options
&& attr.options.length > 1
&& (
<div className="color-attr_fm">
{
attr.options.map((e, i) => {
return (
<div
key={i}
className="filter-color__item"
id={e.id + attr.code}
>
<span
className={classNames(
'filter-color__check input-check-color',
{
'input-check-color--white':
colorType(e.swatch_value) === 'white',
'input-check-color--light':
colorType(e.swatch_value) === 'light',
},
)}
style={{ color: `${e.label}`.toLowerCase() }}
>
<label className="input-check-color__body">
<input
id={attr.code + e.id}
className="input-check-color__input"
name={attr.code}
type="radio"
value={e.id}
checked={state.selectedConfigs[attr.code].id === e.id}
onChange={() => {
handleChangeConfig(
e.products,
attr.id,
attr.code,
e,
)
}}
disabled={isDisabled(e, attr.code)}
/>
<span className="input-check-color__box"/>
<Check12x9Svg className="input-check-color__icon"/>
<span className="input-check-color__stick"/>
</label>
</span>
</div>
)
})
}
</div>
)
}
</div>
)
}
}
})
}
</div>
)
}
export default ConfigurableFilters
这是我的示例屏幕截图
在这个产品中它不起作用......我没有“M”尺寸，但它已启用
有什么建议或想法吗？？
这是我的可配置数据
{
"attributes": [
{
"id": 23,
"code": "color",
"label": "Color",
"options": [
{
"_id": "6215cd906648a738081c765b",
"id": 1,
"admin_name": "Red",
"attribute_id": 23,
"sort_order": 1,
"label": "Red",
"translations": [
{
"locale": "en",
"name": null
},
{
"locale": "ru",
"name": null
}
],
"products": [
119,
123,
125
]
},
{
"_id": "6215cd906648a738081c765c",
"id": 2,
"admin_name": "Green",
"attribute_id": 23,
"sort_order": 2,
"label": "Green",
"translations": [
{
"locale": "en",
"name": null
},
{
"locale": "ru",
"name": null
}
],
"products": [
120,
122,
124,
126
]
}
],
"swatch_type": null,
"product_id": 118
},
{
"id": 24,
"code": "size",
"label": "Size",
"options": [
{
"_id": "6215cd906648a738081c7660",
"id": 6,
"admin_name": "S",
"attribute_id": 24,
"sort_order": 1,
"label": "S",
"translations": [
{
"locale": "en",
"name": null
}
],
"products": [
119,
120,
123,
124
]
},
{
"_id": "6215cd906648a738081c7661",
"id": 7,
"admin_name": "M",
"attribute_id": 24,
"sort_order": 2,
"label": "M",
"translations": [
{
"locale": "en",
"name": null
}
],
"products": [
122,
125,
126
]
}
],
"swatch_type": null,
"product_id": 118
},
{
"id": 29,
"code": "Papertype",
"label": "Paper type",
"options": [
{
"_id": "6215cd906648a738081c7669",
"id": 15,
"admin_name": "Type 1",
"attribute_id": 29,
"sort_order": 1,
"label": "Type 1",
"translations": [
{
"locale": "en",
"name": null
}
],
"products": [
119,
120,
122
]
},
{
"_id": "6215cd906648a738081c766a",
"id": 16,
"admin_name": "Type 2",
"attribute_id": 29,
"sort_order": 2,
"label": "Type 2",
"translations": [
{
"locale": "en",
"name": null
}
],
"products": [
123,
124,
125,
126
]
}
],
"swatch_type": null,
"product_id": 118
}
],
"chooseText": "Choose an option",
"index": {
"119": {
"23": "1",
"24": "6",
"29": "15"
},
"120": {
"23": "2",
"24": "6",
"29": "15"
},
"122": {
"23": "2",
"24": "7",
"29": "15"
},
"123": {
"23": "1",
"24": "6",
"29": "16"
},
"124": {
"23": "2",
"24": "6",
"29": "16"
},
"125": {
"23": "1",
"24": "7",
"29": "16"
},
"126": {
"23": "2",
"24": "7",
"29": "16"
}
}
}