React实现购物车功能

这个简单的demo,功能是这样的:
最左侧是列表,点击列表项可查看详情,中间是详情,详情中有按钮,点击可加入购物车,最右侧是购物车,购物车自动更新总数和总价.
使用create-react-app创建.
代码如下:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Books from './Books';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './styles/index.css';

ReactDOM.render(
  <Books />,document.getElementById('root')
);

Books.js:

import React,{ Component } from 'react';

import BookList from './BookList';
import BookDetail from './BookDetail';
import Car from './Car';

class Books extends Component {
  constructor() {
    super()
    this.handleListClick = this.handleListClick.bind(this);
    this.handleAddToCar = this.handleAddToCar.bind(this);

    this.state = {
      currentBook: null,car: [],totalNum: 0,total: 0
    };
  }

  handleListClick(book) {
    this.setState({
      currentBook: book
    });
  }

  handleAddToCar(currentBook) {
    let totalNum = this.state.totalNum;
    let car = this.state.car;
    let total = this.state.total;

    let exist = false;

    if (car.length) {
      car.forEach(book => {
        if (book.id === currentBook.id) {
          book.number += 1;
          totalNum += 1;
          exist = true;
          this.setState({
            totalNum
          });
        }
      });
    }

    if (!exist) {
      car = car.concat(Object.assign({},currentBook,{number:1}));
      totalNum += 1;
      this.setState({
          car,totalNum
      }); 
    }

    total = car.map(book => (book.price * book.number)).reduce((prev,cur) => prev + cur);
    this.setState({
      total
    });
  }

  render() {
    return (
      <div className='row'>
        <BookList books={this.props.books} listClick={this.handleListClick}/>
        <BookDetail currentBook={this.state.currentBook} addToCar={this.handleAddToCar}/>
        <Car {...this.state} />
      </div>
    );
  }
}

Books.defaultProps = {
    books: [
    {
      id: 1,category: 'CSS',title: 'CSS权威指南',author: 'Eric A. Meyer',price: 42
    },{
      id: 2,category: 'JS',title: 'JavaScript高级程序设计',author: 'Nicholas C.Zakas',price: 69
    },{
      id: 3,title: '精通CSS:高级Web标准解决方案',author: '巴德,科利森,莫尔',price: 25
    }
  ]
};

export default Books;

BookList.js:

import React from 'react';

const BookList = ({books,listClick}) => {
  return (
    <div className='col-md-2'>
      <h2>图书列表</h2>
        <ul>
          {books.map((book) => {
            return (
              <li key={book.id} onClick={() => listClick(book)}>
                {book.title}
              </li>
            )            
          })}
        </ul>
    </div>
  );
};

export default BookList;

BookDetail.js

import React from 'react';

const Bookdetail = ({currentBook,addToCar}) => {
  if (!currentBook) return <div className='col-md-4'><h2>选择图书</h2></div>
  return (
    <div className='col-md-4'>
      <h2>图书详情</h2>
      <h3>{currentBook.title}</h3>
      <p>作者:{currentBook.author}</p>
      <p>价格:{currentBook.price}</p>
      <p>编号:{currentBook.id}</p>
      <button onClick={() => addToCar(currentBook)}>
        放进购物车
      </button>
    </div>
  );
};

export default Bookdetail;

Car.js:

import React from 'react';

const Car = ({car,totalNum,total}) => {
  let result = car.length ? <p>共{totalNum}本 总价为{total}</p>: <p>购物车为空</p>;
  return (
    <div className='col-md-6'>
      <h2>购物车</h2>
      <ul>
        {
          car.map((book,index) => {
            return <li key={index}>
              {book.title} 价格为: {book.price} 已选择{book.number}本
            </li>
          })
        }
      </ul>
      {result}
    </div>
  );
};

export default Car;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!