react 购物车组件

import React from 'react'
import { Component } from 'react'
import "./cart.css"
// 纯显示的组件
function Cart({ carts }) {return (<div><table><tbody>{carts.map(cart => {return (<tr key={cart.id}><td>{cart.name}</td><td>{cart.price}</td><td>{cart.count}</td><td>{cart.count * cart.price}</td></tr>);})}</tbody></table></div>);
}// 购物车数据的设计
// {
//         name: "java",
//         price: 100,
//         count: 2
// }// 类的组件写法，都是jsx
export default class hello extends Component {constructor(props) {super(props);this.state = {val: "",goods: [{title: "java",price: 1000},{title: "php",price: 500}, {title: "python",price: 800}],carts: [{id: 1,name: "java",price: 100,count: 2}]}}changeVal(ev) {this.setState({...this.state,val: ev.target.value});}addGood(name) {var good = {title: name,price: 666}this.setState({val: "",goods: [...this.state.goods,good]});}addToCart(good) {console.log(good);let index = this.state.carts.findIndex(item => item.name == good.title);if (index !== -1) {// 修改操作let cart = this.state.carts[index];cart.count++;cart.name = good.titlethis.state.carts.splice(index, 1);// 若找到的话就修改操作this.setState({carts: [...this.state.carts,cart]});} else {//找不到添加操作var cart = {...good,count: 1,id: this.state.carts.length + 1,name: good.title}// 添加操作this.setState({carts: [...this.state.carts,cart]});}}render() {return (<div><input type='text' value={this.state.val} onChange={(event) => this.changeVal(event)}></input><button onClick={(ev) => this.addGood(this.state.val)}>submit</button><ul>{/* jsx 可以嵌套jsx  */this.state.goods.map(item => {return (<li key={item.title}>{item.title}<button onClick={(ev) => this.addToCart(item)}>添加</button></li>)})}</ul>{this.state.carts.length > 0 && <Cart carts={this.state.carts}></Cart>}</div>)}
}

我的设想就是购物车展示就是纯展示

而购物车数据，和商品数组都在父级中，这个和vue 差别有点大

数组中找元素，找到就返回对应的下标，找不多就返回-1

没有啥可说的，就是商品列表中，点添加到购物车，就添加进去了！

我记得我vue 也写过这个逻辑，所以业务逻辑一样的，只是写法不同！

结果展示

我发现展示结果不太对，于是我修改了下代码

这回展示结果如下：

react 购物车组件相关推荐

React子组件给父组件传值，父组件引用子组件并给子组件传值
本博客代码是 React 父组件和子组件相互传值的 demo:实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图:效果图如下: 父组件代码: 代码解析: ...
react测试组件_测试驱动的开发，功能和React组件
react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...
react创建组件_如何使用React创建时间轴组件
react创建组件 These days I've been working on a new page for my website. I wanted to have a Timeline to ...
react hooks使用_如何使用Hooks将React类组件转换为功能组件
react hooks使用 by Balaganesh Damodaran 通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to conve ...
vue 新手指引_精通react/vue组件设计之快速实现一个可定制的进度条组件
前言这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根 ...
React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...
react 调用组件方法_React源码分析1 — 组件和对象的创建（createClass，createElement）...
1 组件的创建学习了半年前端了,感觉前端的水确实也很深.做安卓的时候就对React-Native比较感兴趣,开发H5时也使用了一段时间的ReactJS.所以决定好好分析下它的源码.文章中有不对的地方 ...
React的组件中的传值，及context上下文的使用
React的组件之间互相传值父子组件传值兄弟组件传值上下文context 父子组件传值 react 中父组件可以将数据作为子组件的属性进行传值,子组件通过 props 属性接收值. 父组件可以监 ...

react 购物车组件

react 购物车组件相关推荐

最新文章

热门文章