Hola, estoy haciendo un carrito de compras simple. Cada artículo del carrito tiene una casilla de verificación junto a él, que cuando se marca, agrega ese artículo a una matriz de artículos ordenados, y luego la aplicación imprime la suma de todos los artículos marcados.
Lo configuré para que cada elemento sea un componente secundario, y en el principal configuré un controlador de eventos handleChange que está vinculado a la propiedad onChange de la casilla de verificación. El problema es que no tengo idea de cómo "pasar" el componente Elemento para la casilla de verificación determinada al padre.
Para ver una demostración en vivo de la aplicación, consulte https://codesandbox.io/s/checkbox-summation-p29pm?file=/src/Item.js:28-239
export default function App() { const allItems = AllItems; const [orderedItems, setOrderedItems] = useState([]); const handleChange = (event) => { console.log(event); if (event.target.checked) { console.log("checked", event.target.name); // add item to orderedItems array } else { // remove item from orderedItems array } }; return ( <div className="App"> {allItems.map((item) => ( <Item item={item} key={item.name} handleChange={handleChange} /> ))} <div> Total ={" "} {orderedItems.length === 0 ? "0" : orderedItems.reduce((acc, item) => { return acc + Number(item.price); }, 0)} </div> </div> ); }COMPONENTE DEL ARTÍCULO:
const Item = ({ item, handleChange }) => { return ( <div> <input type="checkbox" name={item.name} onChange={handleChange} /> {item.name} ${item.price} </div> ); }; export default Item;Dado que no lo está manteniendo como un grupo, puede usar el estado para mantener el artículo del carrito cada vez. Por lo tanto, debe pasar los datos del elemento y los datos del evento en handleChange.
Componente del artículo:
const Item = ({ item, handleChange }) => { return ( <div> <input type="checkbox" name={item.name} onChange={event => handleChange(item, event)} /> {item.name} ${item.price} </div> ); }; export default Item;y en el componente App, podrás manejar los datos. Lo he manejado de esta manera (he agregado otra variable de estado para obtener el costo total, no quiero ejecutar un ciclo cada vez que hago el cambio, así que mantuve el estado)
const handleChange = (item, event) => { if (event.target.checked) { setOrderedItems((cartItem) => [...cartItem, item]); setTotalCost((total) => total + parseInt(item.price)); // add item to orderedItems array } else { // remove item from orderedItems array setOrderedItems((cartItem) => cartItem.filter((i) => i.name !== item.name) ); setTotalCost((total) => total - parseInt(item.price)); }Aquí puede tener el código ejecutable https://codesandbox.io/s/checkbox-summation-forked-0wnp9?file=/src/App.js:296-750