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

Posted 2023-03-05

【中文标题】如何在reactJs中的数组内部条件下禁用某些单选按钮

【英文标题】：How to make some radio buttons disable under condition inside array in reactJs

【发布时间】：2022-01-23 10:31:38

【问题描述】：

我在一个电子商务网站上工作，我需要根据颜色显示产品尺寸。所有可用尺寸都可以点击，而其他尺寸将被禁用。这是我的 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 数组中的某些尺寸（即单选按钮）。我该怎么做？

【参考方案1】：

这取决于您在sizeList 项中有什么信息：

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

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

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

希望这是有道理的:)

【参考方案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 />

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

【讨论】：

我将如何设置 attribute_disable 属性？现在没有这样的财产。你能详细说明你的答案吗？

你的数组里基本上应该有一些东西，在这个基础上你可以启用和禁用你的输入框，对吧？

【参考方案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>
  );
;

【讨论】：

我需要先禁用单选按钮，然后再单击它。我需要显示其中一些已经禁用，这意味着不可点击。