react做购物车的功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了react做购物车的功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1580字，纯文字阅读大概需要3分钟。

内容图文

父组件

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')
  }


}

 

内容总结

以上是互联网集市为您收集整理的react做购物车的功能全部内容，希望文章能够帮你解决react做购物车的功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---