Как сложить цены в корзине товаров?

Question

[Владислав]

Нужно, чтобы в корзине товаров складывались цены продуктов, которые пользователь хочет приобрести.

Компонент-родитель:

import React, {Component} from 'react';

import Item from '../components/Item';
import Cart from '../components/Cart';

import '../css/shop.css';
import '../css/keyload.css';

class Items extends Component{
    constructor(props){
        super();
        this.state ={
            price: ''
        };
        this.handleCartPriceChange = this.handleCartPriceChange.bind(this);
}
    handleCartPriceChange(price){
        this.setState({price});
    }
    render(){
    return(
        <div className="wrap">
            <Cart price={this.state.price} />
            <section className="shop">
                <div className="wrap_container">
                {this.props.items.map(item =>
                     <Item price={item.price} onCartPriceChange={this.handleCartPriceChange} key={item.id} shirt ={item.img}/>
                )
                }
                </div>
            </section>
        </div>
    );
}
}
export default Items;

Cart.jsx

import React, {Component} from 'react';

import Button from './Button';

import cart from './img/cart.svg';
export default class Cart extends Component{
    constructor(props){
        super();
    }
    render(){
        return(
            <aside className="cart">
            <div className="wrapper">
                    <img src={cart} alt=""/>
                    <div className="priceOutput">
                        <span className="price">{`${this.props.price ? this.props.price+ '$' : 'Add item to cart' }` }</span>
                        <hr/>
                        <Button className="btn_submit">Submit</Button>
                    </div>
            </div>
            </aside>            
        );
    }
}

Item.jsx: ( сама единица товара в магазине)

import React from 'react';

import Button from './Button';

function Item(props){
    return(
        <div className="shop__item">
            <img className="item" src={props.shirt} alt=""/>
            <div className="title">
                <a href="#" className="descr">подробнее</a>
                <Button onClick={()=> props.onCartPriceChange(props.price)} className="btn_buy">Buy</Button>
            </div>
        </div>        
    );
}
export default Item;

Answer 1

[0xD34F]

Наверное, вместо

this.setState({price});

должно быть что-то вроде

this.setState({ price: this.state.price + price });

И дефолтное значение price - почему пустая строка? Такой суммы не бывает. Бывает 0.

Answer 2

[Михаил Макаров]

Ну и конечно по-человечески разрабатывать вам религия не позволяет, а поэтому вы решили зафигарить проект на React/Redux/чётотам, а теперь вместо

SELECT SUM(`price`) FROM `basket` WHERE `userid`=:userid;

приходится вопрошать на форуме, как из этой простыни джаваскрипта, htmlя и компонентов выдрать чёртову сумму.

Comments

[Владислав]

Это проект для оттачивания навыков :)

[JackShcherbakov]

Ахах, рассмешили!

[Владислав]

JackShcherbakov, а что не так?

[JackShcherbakov]

Vladislav, Я не вам это предназначал, а Михаилу ; ) Просто Михаил забавно сформулировал предложение. Если я вас как-то обидел, то приношу извенения.