0
148
Visualizaçõesalternar estilos de múltiples botones al hacer clic en reaccionar
hola a todos Estoy construyendo mi primera tienda de comercio electrónico y me encontré con un problema, mi sitio vende zapatos. 
pero cuando hago clic en el botón, quiero poder cambiar el color del botón seleccionado. Solo debería poder seleccionar un botón, ya que no puede tener dos tamaños por zapato.
aquí está el componente que contiene la tarjeta de zapatos:
import React from "react"; const ShoeProductCard = ({ productData }) => { const sizes = [7, 8, 9, 10]; return productData.map((product) => { return ( <div key={product.id} className="productsGrid"> <div key={product.id} className="container"> <div key={product.id} style={{ backgroundColor: product.color }} className="card" > <div key={product.id} className="imgBx"> <img key={product.id} src={product.img} alt="shoes" /> </div> <div className="contentBx"> <h2>{product.title}</h2> <div className="size"> <h3>Size :</h3> {sizes.map((size) => ( <span key={size} >{size}</span> ))} </div> <a href="#" alt="logo"> {" "} <i className="fa-solid fa-cart-arrow-down"></i> </a> <br /> <span className="price">Price: {product.price}</span> <br /> <i style={{ color: "white", cursor: "pointer" }} className="fa-solid fa-circle-info" ></i> </div> </div> </div> </div> ); }); }; export default ShoeProductCard;ahora lo que intenté fue darle a mis estilos un estado de verdadero y falso y leerlo condicionalmente con mi clase en el componente en línea. pero eso no funcionó, simplemente borró toda la página.
1 Respostas
Responde à pergunta0
Así es como lo haría. Tenga una variable de estado que almacene el tamaño de zapato seleccionado, que cambia cuando se hace clic en un botón de nuevo tamaño.
import React, { useState } from "react"; const ShoeProductCard = () => { const sizes = [7, 8, 9, 10]; const [selectedSize, setSelectedSize] = useState(""); // dummy data let productData = [{ id: 1, img: "imgSrc", title: "Yeezy 350s", price: 780 }]; return productData.map((product) => { return ( <div key={product.id} className="productsGrid"> <div key={product.id} className="container"> <div key={product.id} style={{ backgroundColor: product.color }} className="card" > <div key={product.id} className="imgBx"> <img key={product.id} src={product.img} alt="shoes" /> </div> <div className="contentBx"> <h2>{product.title}</h2> <div className="size"> <h3>Size :</h3> {sizes.map((size) => ( <button onClick={() => setSelectedSize(size)} style={{ backgroundColor: selectedSize === size ? "grey" : "white", }} key={size} > {size} </button> ))} </div> <a href="#" alt="logo"> {" "} <i className="fa-solid fa-cart-arrow-down"></i> </a> <br /> <span className="price">Price: {product.price}</span> <br /> <i style={{ color: "white", cursor: "pointer" }} className="fa-solid fa-circle-info" ></i> </div> </div> </div> </div> ); }); }; export default ShoeProductCard;Básicamente, cambié sus intervalos a botones que se asignan desde la matriz de tamaños.
backgroundColor: selectedSize === size ? "grey" : "white",Esto aquí solo cambia el color de los botones, si se ha seleccionado el tamaño, es gris, si no, es blanco. Solo cambia en consecuencia. Es posible que deba configurar sus botones para que se muestren: bloquear para darles el estilo que desee.