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

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

Компонент-родитель:
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;
  • Вопрос задан
  • 496 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Наверное, вместо

this.setState({price});

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

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

И дефолтное значение price - почему пустая строка? Такой суммы не бывает. Бывает 0.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
NightmareZz
@NightmareZz
Нищий разработчик из Симферополя
Ну и конечно по-человечески разрабатывать вам религия не позволяет, а поэтому вы решили зафигарить проект на React/Redux/чётотам, а теперь вместо
SELECT SUM(`price`) FROM `basket` WHERE `userid`=:userid;
приходится вопрошать на форуме, как из этой простыни джаваскрипта, htmlя и компонентов выдрать чёртову сумму.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы