React综合使用联系
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import CartSimple from './CartSimple'
const jsx = (
<div>
<h1>React Study</h1>
<CartSimple/>
</div>
);
//渲染组件
ReactDOM.render(jsx,document.getElementById("root"));
CartSimple组件
import React, { Component } from 'react'
function CartByMe(props) {
return (
<table>
<tbody>
{
props.cart.map((goods, i) => {
return (<tr key={i}>
<td >名称:{goods.tital} </td>
<td >总价格:{goods.price * goods.count} </td>
</tr>)
})
}
</tbody>
</table>
)
}
export default class CartSimple extends Component {
constructor(props) {
super(props)
this.state = {
goods: [],
price: "",
tital: '',
cart: []
}
}
componentDidMount() {
//发起请求
setTimeout(() => {
let goods = [
{ id: 1, tital: "React入门", price: 100 },
{ id: 2, tital: "React高级", price: 800 },
{ id: 3, tital: "React进阶", price: 600 },
{ id: 4, tital: "React精通", price: 200 },
];
this.setState({
goods
})
}, 1000);
}
handlePrice = e => {
this.setState(
{
price: e.target.value
}
);
}
handleTital = (e) => {
this.setState({
tital: e.target.value
})
}
addNewGood = (e) => {
if (this.state.tital && this.state.price) {
let lenMax = this.state.goods.length;
this.setState({
goods: [...this.state.goods, { id: lenMax + 1, tital: this.state.tital, price: this.state.price }]
})
}
}
addShop = (id) => {
const goods = this.state.goods.map((item) => {
if(item.id == id){
return item;
}
});
const good = goods.filter((item)=>{
if(item!=null){
return item;
}
})
const cartGoods = this.state.cart.find(v => v.tital === good[0].tital);
if (cartGoods) {
//已经在购物侧里面有了
const newCart = [...this.state.cart];
newCart.forEach((item) => {
if (item.id == id) {
item.count += 1;
}
})
this.setState({
cart: newCart
})
} else {
//第一次添加商品
this.setState({
cart: [...this.state.cart, {
active: true,
id: good[0].id,
tital: good[0].tital,
price: good[0].price,
count: 1
}]
})
}
}
render() {
return (
<div>
<h1>购物侧</h1>
<div>
<p>
<label htmlFor="tital">名字</label>
<input type="text" id="tital" value={this.state.tital} onChange={this.handleTital} />
</p>
<p>
<label htmlFor="price">价格</label>
<input type="text" id="price" value={this.state.price} onChange={this.handlePrice} />
</p>
<button onClick={this.addNewGood} value="添加">添加</button>
</div>
<ul>
{
this.state.goods.map((item) => {
return (
<li key={item.id}>
<span>名称:{item.tital}</span>
<span>价格:{item.price}</span>
<button onClick={() => this.addShop(item.id)} value="">添加购物侧</button>
</li>);
})
}
</ul>
<hr></hr>
<CartByMe cart={this.state.cart}></CartByMe>
</div>
)
}
}
效果图
React综合使用联系的更多相关文章
- react综合案例-todolist、localstorage缓存数据
1.工具类storage.js var app ={ set(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, get(k ...
- react第二十单元(react+react-router-dom+redux综合案例2)
第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
- react第十九单元(react+react-router-dom+redux综合案例1)
第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...
- React Native 之TabBarIOS
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之 ScrollView介绍和使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React的井字过三关(3)
这是React井字棋项目的最后一篇笔记,记述AI实现. 一. 是开头都会说的原理 但凡懂一点围棋的人都知道"大场"这个概念,可以浅显地把它理解为布局时棋盘上各处的要点.棋谚&quo ...
- React Native常用组件Image使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native 开发之 (06) JSX
一 React 1 React定义 React的GitHub地址是 https://github.com/facebook/react.它的官方介绍是 A JavaScript Library for ...
- [译] Angular 2 VS. React: 血色将至
Angular 2 VS. React: 血色将至 原文链接:https://medium.com/@housecor/angular-2-versus-react-there-will-be-blo ...
随机推荐
- Java中的引用概念
Java对对象和基本的数据类型的处理是不一样的.和C语言一样,当把Java的基本数据类型(如int,char,double等)作为入口参数传给函数体的时候,传入的参数在函数体内部变成了局部变量,这个局 ...
- 痞子衡嵌入式:理解i.MXRT中FlexSPI外设lookupTable里配置访问行列混合寻址Memory的参数值
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT中FlexSPI外设lookupTable里配置访问行列混合寻址Memory的参数值. 关于 FlexSPI 外设的 loo ...
- 3.云原生之Docker容器三大核心概念介绍
转载自:https://www.bilibili.com/read/cv15181760/?from=readlist docker search --no-trunc=false [镜像名称] #搜 ...
- 使用 Elastic 技术栈构建 K8S 全栈监控 -3: 使用 Filebeat 采集 Kubernetes 集群日志
文章转载自:https://www.qikqiak.com/post/k8s-monitor-use-elastic-stack-3/ 操作步骤 filebeat连接es使用上一步创建的secret: ...
- 分布式安装部署MinIO
官方文档地址:http://docs.minio.org.cn/docs/master/distributed-minio-quickstart-guide 前提条件:分布式Minio至少需要4个硬盘 ...
- SonarQube支持Gitlab授权登录
部署好SonarQube之后,由于我们内部使用的是自建的Gitlab仓库,即每个开发同学都有Gitlab账号,SonarQube我们就可以使用上Gitlab登录,这样就不需要再维护一套用户体系了. S ...
- 【前端必会】单页应用-你的新朋友wepack
背景 我们开发的功能可能是简单的,但是实现功能的代码行数却可能成千上万 出于易于维护.安全.服用,我们会根据我们的经验设计我们的代码,拆解成多个独立的功能模块(代码片段.更多的文件) JS的模块规范有 ...
- 使用 HammerDB 对 Citus 和 Postgres 进行 Benchmark,每分钟200万新订单处理测试(官方博客)
在为 Postgres 运行性能基准测试时,主要建议是:"自动化!" 如果您正在测量数据库性能,您可能不得不一遍又一遍地运行相同的基准测试. 要么是因为你想要一个稍微不同的配置,要 ...
- 【Java8新特性】- 接口中默认方法修饰为普通方法
Java8新特性 - 接口中默认方法修饰为普通方法 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学 ...
- 220722 T4 求和 /P4587 [FJOI2016]神秘数 (主席树)
好久没打主席树了,都忘了怎么用了...... 假设我们选了一些数能构成[0,x]范围内的所有值,下一个要加的数是k(k<=x+1),那么可以取到[0,x+k]内的所有取值,所以有一种做法: 对于 ...