如何在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

这取决于您在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>
  );
};

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

希望这是有道理的:)

Answer 2

您可以在输入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>
    );
}

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

---

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

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

这里的东西可以是你数组中的任何条件。

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>
  );
};