Estoy implementando un comercio electrónico simple que tiene un carrito de compras. En mi proyecto habrá una página que muestra todos los detalles del producto individual. En el que habrá una selección múltiple de diferentes atributos, que serán botones de opción. Por ejemplo, el iPhone 13 tiene atributos como color y capacidad. Estos atributos provienen de un punto final de GraphQL.
Lo que quiero hacer es crear un botón AGREGAR AL CARRITO . Antes de agregar el producto al carrito, se deben VERIFICAR todos los atributos.
Aquí está mi código para representar los atributos.
{this.state.product.attributes.map(attribute=>{ return ( <> <h5>{attribute.name.toUpperCase() + ":"}</h5> <> {attribute.items.map(item =>{ return ( <> <input onClick={()=>{}} type="radio" id={item.id + " " + attribute.name} name={attribute.name} value={item.value}/> <label htmlFor={item.id + " " + attribute.name}>{item.displayValue}</label> </> ) })} </> </> ) })}Además, aquí está mi código para el botón.
<button onClick={()=>{addProduct(this.props.id, this.state.product.prices)}}>ADD TO CART</button>Déjame saber qué debo hacer?
Es difícil decir qué debe hacer exactamente sin ver el resto de su componente. Sin embargo, recomiendo encarecidamente consultar la documentación de React en los formularios . Es decir, probablemente desee ver su ejemplo en Componentes controlados para rastrear el state de cada atributo.