react做购物车的功能

父组件

import React, { Component } from 'react'
import Lists from '../components/Lists'

export default class Cart extends Component {

  // 数据 状态
  state = {
    carts: [
      { id: 1, name: '苹果11', price: 10, num: 1 },
      { id: 2, name: '小米10', price: 20, num: 1 },
      { id: 3, name: '华为meta40', price: 30, num: 1 }
    ]
  }


  render() {
    return (
      <div>
        {/* 功能组件 */}
        <Lists carts={this.state.carts} handlerCartNum={this.handlerCartNum.bind(this)} />
      </div>
    )
  }

  handlerCartNum(index, flag = 'incr') {
    let carts = this.state.carts

    if ('incr' === flag) {
      carts[index].num++
      /* this.setState({
        carts
      }) */
      /* this.setState(state=>{
        return {
          carts
        }
      }) */
    } else {
      // splice删数组中的数据影响原数组
      carts.splice(index, 1)
    }
    
    this.setState(state => ({ carts }))
  }
}

子组件

import React, { Component } from 'react'
import '../styles/lists.css'

import PropTypes from 'prop-types'

export default class Lists extends Component {

  static propTypes = {
    carts: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.number,
      name: PropTypes.string,
      num:PropTypes.number
    }))
  }


  render() {
    let { carts } = this.props
    return (
      <ul>
        {
          carts.map((item, index) => (
            <li key={item.id}>
              <span>ID：{item.id}</span>
              <span>名称：{item.name}</span>
              <span>价格：{item.price}</span>
              <span>数量:
              <button onClick={this.incr.bind(this, index)}>+</button>
                {/* <button onClick={() => this.incr(index)}>+</button> */}
                {item.num}
                <button onClick={this.decr.bind(this, index)}>-</button>
              </span>
              <span>小计：{item.num * item.price}</span>
            </li>
          ))
        }
      </ul>
    )
  }

  incr(index) {
    // 调用父级中的props传入的函数方法
    this.props.handlerCartNum(index)
  }

  decr(index) {
    // 调用父级中的props传入的函数方法
    this.props.handlerCartNum(index, 'decr')
  }


}