Estoy trabajando en un sitio de comercio electrónico donde necesito mostrar los tamaños de los productos según el color. Donde se podrá hacer clic en todos los tamaños disponibles y se desactivarán otros tamaños. 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 variedad de talles.
<FlexBox alignItems="center" mb="16px"> {sizeList && sizeList.map((item) => ( <SizeVariant key={item.attribute_title} text={item.attribute_title} onClick={(e) => handlePrice(item)} /> ))} </FlexBox>bajo algunas condiciones, quiero deshabilitar algunos de los tamaños (es decir, el botón de opción) de la matriz sizeList. ¿Cómo puedo hacer eso?
Puede pasar la condición dentro del atributo de disable de entrada.
Aquí está el ejemplo de código de su pregunta:
<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> ); } Aquí puede ver que pasé los nuevos accesorios, llamados disabled, y los usé en un componente SizeVariant .
Puede deshabilitar lógicamente el cuadro de entrada,
<input type="radio" name="text" id={text} value={text} disabled={something ? true : false} />Aquí algo puede ser cualquier condición de su matriz.
Depende de la información que tenga en los elementos de la lista de 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 contiene todos los tamaños posibles con alguna propiedad para saber si está disponible o no. En este caso, debe usar esa bandera como accesorios deshabilitados.Espero que esto tenga sentido :)
Tome un estado y almacene el número de índice del botón de opción en el que se hizo clic. Luego compare el número de índice de otro botón de radio con él si el índice no coincide, entonces puede deshabilitar esos botones.
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> ); };