es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo hacer que algunos botones de radio se desactiven bajo una condición dentro de un arreglo en ReactJs.

Cómo hacer que algunos botones de radio se desactiven bajo una condición dentro de un arreglo en ReactJs.

26 Jul, 2023 Programación

Estoy trabajando en un sitio de comercio electrónico donde necesito mostrar tamaños de productos basados en el color. Donde todos los tamaños disponibles serán seleccionables y otros tamaños estarán desactivados. Aquí está mi código para el componente 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;

Tengo un array de tamaños.

<flexbox alignitems="center" mb="16px">
        {sizeList && sizeList.map((item) => (
          <sizevariant key="{item.attribute_title}" text="{item.attribute_title}" onclick="{(e)" ==""> handlePrice(item)} />
        ))}
      </sizevariant></flexbox>

Bajo ciertas condiciones, quiero desactivar algunos de los tamaños (es decir, los botones de radio) del array sizeList. ¿Cómo puedo hacer eso?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para desactivar algunas de las tallas (botones de radio) de la matriz “sizeList”, puedes agregar el atributo “disabled” al elemento de entrada en el componente SizeVariant.

    Puedes modificar la función map en el fragmento de código para verificar si una talla está desactivada y, en función de ello, agregar el atributo “disabled”.

    Aquí tienes un fragmento de código actualizado para el componente SizeVariant:

    const SizeVariant = ({ text, disabled, ...props }) => {

  return (
    <styledsizevariant {...props}="">
      <input type="radio" name="{props.name}" id="{text}" value="{text}" disabled="{disabled}">
      <label htmlfor="{text}">{text}</label>
    </styledsizevariant>
  );
};

    Y así es como puedes modificar la función map para desactivar algunas tallas:

    {sizeList && sizeList.map((item) => (
  <sizevariant key="{item.attribute_title}" text="{item.attribute_title}" disabled="{item.isDisabled}" onclick="{(e)" ==""> handlePrice(item)} />
))}

    En este ejemplo, he agregado una propiedad “isDisabled” a cada elemento de la matriz “sizeList”. Si es verdadera, la talla correspondiente estará desactivada.

    Por lo tanto, puedes actualizar tu matriz “sizeList” en consecuencia con la propiedad “isDisabled” y establecer su valor en true para las tallas que necesiten estar desactivadas.

Comments are closed.