如何將組件（產品）添加到另一個組件（購物車）？

Question

產品卡

import React from 'react';
import { Card, Container, Row, Col, Button} from 'react-bootstrap';
import Cart from './Cart';
import './ItemCard.css';

function ProductCard(props){



    return(
     <Card className="card-style" border="primary" style={{widht:'18rem', flex: 1}}>
     <Card.Img variant="top" src={props.product.image} />
        <Card.Body>
            <Card.Title>{props.product.name}</Card.Title>
            <Card.Text>Price: ${props.product.price}, Quantity: {props.product.quantity}
            </Card.Text>
            <Button variant="primary">Add to Cart</Button>
        </Card.Body>
    </Card>
    
    )
}

export default ProductCard

大車

import React from 'react';
import { Table, thead, tr, th} from 'react-bootstrap';

function Cart (){
    return(
        <div>
            <Table striped border hover>
                <thead>
                    <tr>
                        <th>Product.</th>
                        <th>Price.</th>
                    </tr>
                </thead>
            </Table>
        </div>
    )

}

export default Cart;

我有我的組件購物車和產品購物車。 在這種情況下，當按下“添加到購物車”按鈕時，我試圖將我的產品添加到購物車組件中，我是 react 和 laravel 的新手，所以我不知道該怎么做。

Answer 1

您可能希望在 Product 組件中創建 state 並在單擊添加到購物車按鈕時將 state 傳遞給購物車組件。

產品車

import Cart from './Cart';

 function ProductCard (props) {
 
  const [items, setItems] = useState([]);
 
   function handleAddItems () {
 
      setItems([
        ...items,
        {
          name: props.product.name,
          price: props.product.price,
          quantity: props.product.quantity
        }
      ]);
 
    }
 
     return(
      ..
         <Button variant="primary" onClick = {handleAddItems}>Add to Cart</Button>
      ..
      <Cart items={items}></Cart>
     )
 }

大車

function Cart ({items}) {

 .. 
  console.log(items);
 ..

}