如何使一些单选按钮在reactJs中数组内的条件下禁用

Question

我在一个电子商务网站上工作，需要根据颜色显示产品尺寸。所有可用尺寸都可以点击，其他尺寸将被禁用。这是我的SizeVariant组件代码。

import React from "react";
import styled from "styled-components";
const SizeVariant = ({ text, ...props }) => {
return (
<StyledSizeVariant {...props}>
<input type="radio" name="text" id={text} value={text} />
<label htmlFor={text}>{text}</label>
</StyledSizeVariant>
);
};
const StyledSizeVariant = styled.div`
input[type="radio"] {
display: none;
&:checked + label {
box-shadow: 0px 0px 2px #7d7d31;
border: 2px solid #FFCD4E;

} //
}
label {
display: inline-block;
padding: 0 1rem;
height: 30px;
margin-right: 10px;
cursor: pointer;
font-weight: 600;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
text-align: center;
display: flex;
align-items: center;
font-size: 16px;
}
`;
export default SizeVariant;

我有一系列尺码。

<FlexBox alignItems="center" mb="16px">
{sizeList && sizeList.map((item) => (
<SizeVariant key={item.attribute_title} text={item.attribute_title} onClick={(e) => handlePrice(item)} />
))}
</FlexBox>

在某些情况下，我想禁用sizeList数组中的一些大小(即单选按钮(。我该怎么做？

Answer 1

您可以在输入disable属性中传递条件。

以下是您问题的代码示例：

<FlexBox alignItems="center" mb="16px">
{sizeList && sizeList.map((item) => (
<SizeVariant
key={item.attribute_title}
text={item.attribute_title}
onClick={(e) => handlePrice(item)}
disabled={item.attribute_disable} />
))}
</FlexBox>

// sizevariant
const SizeVariant = ({ text, disabled, ...props }) => {
return (
<StyledSizeVariant {...props}>
<input type="radio" name="text" id={text} value={text} disabled={disabled} />
<label htmlFor={text}>{text}</label>
</StyledSizeVariant>
);
}

在这里，您可以看到，我已经传递了名为disabled的新道具，并在SizeVariant组件中使用了它。

---

您可以在逻辑上禁用输入框，

<input type="radio" name="text" id={text} value={text} disabled={something ? true : false} />

在这里，可以是数组中的任何条件。

Answer 2

这取决于您在sizeList项目中拥有的信息：

1. 如果尺寸列表只提供可用的尺寸，那么您需要为所有可能的尺寸创建单选选项，并只启用尺寸列表中存在的尺寸，例如

const allSizes = [
{ title: 'S', enabled: false },
{ title: 'M', enabled: false },
{ title: 'L', enabled: false },
]
const Component = () => {
const sizes = useMemo(() => {
return (sizeList || []).reduce((agg, item) => {
agg[item.attribute_title].enabled = true
return agg
}, allSizes)
}, [sizeList])
return (
<FlexBox alignItems="center" mb="16px">
{sizes.map((item) => (
<SizeVariant
key={item.title}
text={item.title}
disabled={item.disabled}
onClick={(e) => handlePrice(item)} // you might need to change this to match the new structure
/>
))}
</FlexBox>
)
}
const SizeVariant = ({ text, ...props }) => {
return (
<StyledSizeVariant {...props}>
<input type="radio" name="text" disabled={props.disabled} id={text} value={text} />
<label htmlFor={text}>{text}</label>
</StyledSizeVariant>
);
};

2. sizeList包含所有可能的大小，并带有一些属性来判断它是否可用。在这种情况下，您需要使用该标志作为禁用道具

希望这有意义：(

Answer 3

获取一个状态并存储单击的单选按钮的索引号。然后将其他单选按钮的索引号与其进行比较，如果索引不匹配，则可以禁用这些按钮。

import React from "react";
import styled from "styled-components";
const SizeVariant = ({ text, ...props }) => {
const [buttonIndex, setButtonIndex] = useState();

return (
<StyledSizeVariant {...props}>
<input onClick={()=>setButtonIndex(index)} disabled={buttonIndex  && buttonIndex == indexOfYourArry?false:true} type="radio" name="text" id={text} value={text} />
<label htmlFor={text}>{text}</label>
</StyledSizeVariant>
);
};