javascript - 选择项目时反应更新购物车

Question

我是新手，我正在做一个飞行项目。我正在尝试在选择项目时更新购物车。我知道代码的结构可能不是最好的方法，但这是我目前所拥有的。

Export class DestinationPrices extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flightData: [],
            checked:false,
            data:'',
            cart:[]
        };

        this.handleClick = this.handleClick.bind(this);
        this.handleAddToCart = this.handleAddToCart.bind(this);

    }

 NavCart() {

        return (

            <div className="Nav" >
                <Card body >

          <CardTitle ><h3><b>Flights Selected : </b></h3></CardTitle>
    <CardText >
<span className="fa fa-cart-plus fa-2x"> {this.props.cart.length}</span> 
    </CardText>


                </Card>
            </div>
            )
    }

那是购物车本身，它应该在选择时更新项目数量。下面是选择方法，您可以选择不同的卡。

Select(FD) {

 this.state={route:''};

       return (
           <div>
               {FD.FlightID}
            <label>

                <Checkbox id={FD.FlightID}
                          name={FD.FlightID}
                          checked={this.setState.route}

                 onChange={(()=> this.handleCheckboxChange(FD.FlightID))}
               handleClick={()=>{this.handleClick(FD.FlightID)}}

                />
                <span>Select</span>
            </label>
           </div>


        )
    }

这些是我必须处理更改的功能

 handleCheckboxChange =(id) =>{
        var data;
        const selected = (e => e.FlightID = id);
        this.handleAddToCart(id);
    };

    handleAddToCart(flight) {
        const cartItem = this.state.cart.find(x => x.id === flight.id);
        this.setState({cart: [...this.state.cart, flight]})
    }

    handleClick(flight) {
        this.handleAddToCart(flight)
    }

如果有人能够提供帮助，将不胜感激。

标签： javascriptreactjs