我在reactjs中遇到购物卡问题吗?

这是App.js
import React from "react";
import ListProduct from "./listProduct";
import ListOrder from "./listOrder";
import pizza from "./pizza.jpg";
import './style.css'
import { Container,Row,Col,Button } from 'react-bootstrap';
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      total: 0,
      count: 0,
      products: [
        { id: 0, name: "Cold cuts", price: 5, value: 0, src: pizza },
        { id: 1, name: "Pepperoni", price: 3.5, value: 0, src: pizza },
        { id: 2, name: "Feta", price: 2.5, value: 0, src: pizza },
        { id: 3, name: "Mozzarella", price: 1.5, value: 0, src: pizza },
        { id: 4, name: "Swiss cheese", price: 1.5, value: 0, src: pizza },
        { id: 5, name: "Spices", price: 0.5, value: 0, src: pizza },
        { id: 6, name: "Vegetable", price: 0.5, value: 0, src: pizza },
      ],
      foodsOrder: [],
    };
  }
  handleIncrement = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };
  render() {
    return (
      <Container >
        <Row>
          <Col xs = {8}>
              <ListOrder />
          </Col>
          <Col className = 'item'>
            <Row className = 'header'>
              <span>Your pizza : </span>
              <span>$</span>
              <Button variant = 'warning'>Reset Pizza</Button>
            </Row>
            <ListProduct
              count={this.state.count}
              handleIncrement={this.handleIncrement}
              products = {this.state.products}
            />
          </Col>  
        </Row>
      </Container>
    );
  }
}
export default App;
这是listProduct.js
import React, { Component } from "react";
import Item from "./Item";
import {Row,Button} from 'react-bootstrap';
class ListProduct extends React.Component {
    render() {
    const {handleIncrement,count,products} = this.props
    return (
      <>

       {products.map(product =>  <Item key = {`${product.id}`} {...product}
          handleIncrement={handleIncrement}
          count={count}
        />)
       }
      </>
    );
  }
}

export default ListProduct;
这是Item.js
import React from 'react'
import ListProduct from './listProduct';
import {Row,Col,Button,Badge } from 'react-bootstrap';
class Item extends React.Component{
    render(){
            const {id,name,price,value,pizza} = this.props
            const {handleIncrement,count} = this.props
        return (
        <>
        <Row className = 'item'>
            <Col className = 'information'>
                <p>{name}</p>
                <p>{`${price} $`}</p>   
            </Col>
            <Col className = 'button'>
                <Button className = 'add' variant = 'success' onClick = {() => {handleIncrement(id)}} >+</Button>
                <Badge>{count}</Badge>
                <Button className = 'delete' variant="danger">-</Button>
            </Col>
        </Row>
        </>
        )
    }
}
export default Item;

when i click event hanldeInCrement in button , all variable this.state.count in class App increase as picture follow . i'm try orther way but doesn't enter image description here

i want to when i click button that just only focus button executing. Help me. Thank you so much........................................

评论