React == 实现简易购物车

悬剑请抬头 發表於 2019-9-28 14:43:00

React == 实现简易版购物车
　　1、几个要点：
　　为了方便后面使用input type = "checkbox" 实现复选框的选中/不选中，给传递过来的属性要在遍历的时候，单独加上一个新属性 checked 
　　count 属性默认值都是1.
　　state = {
<pre>　　　　　all : false,
 sumprice :0,
 one : false,
 sumcount:0</pre>
　　} 
　　state对象： 
<ul>
<li>　　all -----> 用来定义全选按钮</li>
<li>　　sumprice -----> 用来定义总价</li>
<li>       one -----> 用来控制结算按钮的样式（当选中的其中任何一条购物车条目时候，显示橘色，当没有任何一条选中，显示灰色）</li>
<li>       sumcount ---->  用来显示购物车的总数量，显示在页面中</li>
</ul>
 
　　2、单选框的实现
　　1）首先是渲染的都是同样的样式，所以在这里传递一个index特别关键，通过index的传递才能够知道操作的是哪条
　　2）当onchange事件发生的时候，对当前checked属性进行取反。list.checked = ! list.checked。
　　3）单选框决定全选框：使用了数组的every方法（只有数组的每一项都满足条件，才会返回true），用所有datalist的单选框都是true的时候，全选按钮才会为true
　　4）单选框的选中与否决定结算框的样式：one ： list.checked // 为true的时候，one ： true 
<div class="cnblogs_code">
<div>
<div>　　　<input type="checkbox" className={style.checkbtn+' '+style.UnChecked}  ref="mytext"</div>
<div>           onChange={()=>{this.handleChange(index)}} checked={item.checked} value=""</div>
<div>     /></div>
</div>
<pre> // 单选
 handleChange(index){
　　　　　
 var list = [...this.state.datalist]
 list.checked = !list.checked

 // every方法
 var every=list.every((item,index)=>{
 return item.checked==true;
 })

 // 单选框中如果有一个是 checked的是true就可以
 var some = list.some((item,index)=>{
 return list.checked
 })


 this.setState({
 datalist :list,
 all : every, //全选按钮，只有当所有的list=== true 的时候才会返回true
 one : some//设定结算框的样式是哪个，根据list.checked
 })

 this.SumPrice()

}</pre>
</div>
 
　　　　3、全选按钮的实现
　　　　1）当点击全选框，对全选框的状态进行取反
　　　　2）点击全选按钮的时候，所有的单选框的为true / false 直接取决的全选框按钮当前的状态true / false 
　　　　　遍历所有的list.checked = all ，把全选框的状态（true/false）直接赋值给所有的list.checked 。 
　　　　3）当全选的时候，结算框的样式直接会跟随变动，当为false，即没有一个购物车条目呗选中，此时结算框的状态为灰色。当为true，结算框为橘色。
<div class="cnblogs_code">
<pre> <input type="checkbox" onChange={()=>{this.handleAll()}} checked={this.state.all} value=""/>

// 全选
 handleAll(){
 var list = [...this.state.datalist]
 var all = this.state.all
 all = ! all //onchange事件发生，就是对当前的状态进行取反
 for(var i = 0 ; i < list.length ;i++){
 list.checked = all // 全选框的状态直接影响所有的单选框，就把全选框的状态赋给所有的单选框即可
 }

 this.setState({
 all : all,
 one : all //全选的状态直接影响结算框的样式
 })
 this.SumPrice()
}</pre>
</div>
 
　　　　4、购物车数量加减的实现
　　　　1）数量增加Add
　　　　重要的还是传递对应的index，才能准确地知道操作的是哪个购物车条目 
　　　　list.count++
　　　　2）数量减少Minus
　　　　还有进行一步判断，当此时购物车的数量已经是1的时候，不允许再继续减了
　　　　list.count--
　　　　list.count<1?1:list.count
　　　　
<div class="cnblogs_code">
<pre><button className={style.minus} onClick={()=>{this.handleMinus(index)}}>-</button>
<input type="text" value={this.state.datalist.count||''}/>
<button className={style.add} onClick={()=>{this.handleAdd(index)}}>+</button>

// 加
handleAdd(index){
 // 设定的value= {this.state.datalist.count}
 var list = [...this.state.datalist]
 list.count++;

 this.setState({
 datalist : list,
 })

 this.SumPrice()

}

//减
 handleMinus(index){
 // 设定的value= {this.state.datalist.count}
 var list = [...this.state.datalist];
 list.count--
 list.count=list.count<1?1:list.count;
 this.setState({
 datalist : list
 })

 this.SumPrice()
}</pre>
</div>
 
　　　　5、总价的实现
　　1）遍历所有的datalist，只有当其中每一个checked属性为true的时候（表明已经被勾选上了，此时可以计算），才去计算金额
　　2）得到所有的总价，还能得到当前选中的数量一共有多少
<div class="cnblogs_code">
<pre>SumPrice(){
 var sum=0
 var count = 0;
 var list = [...this.state.datalist]
 for(var i =0; i< list.length ;i++){
 if(list.checked=== true){
 sum += list.newprice *list.count
 count += list.count
 }
 }

 this.setState({
 sumprice : sum,
 sumcount : count //结算个数
 })
}</pre>
</div>
 
　　　　6、当进行数量的增加、减少、单选按钮、全选按钮的时候都要重新调用计算总价的函数。
　　　=============================================================================　
　　完整代码：
JS >
<div class="cnblogs_code">
<pre>class CartPage extends Component {
state = {
 datalist:[
 {
 "imgUrl":"https://wochu.oss-cn-hangzhou.aliyuncs.com/upload/c8db2f99-d79e-4c4a-97e8-3e95c67a3b2e.jpg",
 "name": "小青菜350g",
 "newprice" : "4.5",
 "oldprice" : "4.9",
 "checked" :false,
 "count" :1
 },

 {
 "imgUrl":"https://img.wochu.cn/upload/abbc6852-711f-4d09-8e61-216c13505ccd.jpg",
 "name": "洪湖渔家香辣大闸蟹500g",
 "newprice" : "15.9",
 "oldprice" : "39.9",
 "checked" :false,
 "count" :1

 },
 {
 "imgUrl":"https://wochu.oss-cn-hangzhou.aliyuncs.com/upload/c8db2f99-d79e-4c4a-97e8-3e95c67a3b2e.jpg",
 "name": "小青菜350g",
 "newprice" : "4.5",
 "oldprice" : "4.9",
 "checked" :false,
 "count" :1

 },
 ],
 all : false,
 sumprice :0,
 one : false,
 sumcount:0
}

render() {
 return (
 <div className={style.cartList}>
 <div className={style.cartListItem}>
 <ul className={style.shopList} ref="myul">
 {/* 对应的每个购物车条目 */}
 {
 this.state.datalist.map((item,index)=>

 <li key={index}>
 <input type="checkbox" className={style.checkbtn+' '+style.UnChecked}ref="mytext"
 onChange={()=>{this.handleChange(index)}} checked={item.checked} value=""
 />
 <div className={style.shopImg}>
 {/* 点击图片跳转到页面详情 */}
 <div className={style.shopImgShow}>
 <img src={item.imgUrl} alt=""/>
 </div>
 </div>
 {/* 商品详情 */}
 <div className={style.shopInfo}>
 <div className={style.shopTitle}>{item.name}</div>
 <div className={style.shopCoupen}></div>
 <div className={style.shopPrice}>
 <div className={style.price}>
 ￥{item.newprice}
 ￥{item.oldprice}
 </div>
 <div className={style.shopSelect}>
 <button className={style.minus} onClick={()=>{this.handleMinus(index)}}>-</button>
 <input type="text" value={this.state.datalist.count||''}/>
 <button className={style.add} onClick={()=>{this.handleAdd(index)}}>+</button>
 </div>
 </div>
 </div>
 </li>
 )
 }

 </ul>
 </div>

 <div className={style.sum}>
 <input type="checkbox" onChange={()=>{this.handleAll()}} checked={this.state.all} value=""/>
 <div className={style.checkPrice}>
 {/* 合算 */}
 <div className={style.totalPrice}>
 合计
 ￥{this.state.sumprice}
 </div>
 {/* 不含运费 */}
 <div className={style.fee}>(不含运费)</div>
 </div>

 {/* 结算按钮 */}
 <div className={this.state.one?style.btnCheck:style.btnNoCheck}>结算
 ({this.state.sumcount})
 </div>
 </div>

 </div>
 );
}

// 单选
 handleChange(index){

 var list = [...this.state.datalist]
 list.checked = !list.checked


 var every=list.every((item,index)=>{
 return item.checked==true;
 })

 // 单选框中如果有一个是 checked的是true就可以
 var some = list.some((item,index)=>{
 return list.checked
 })


 this.setState({
 datalist :list,
 all : every,
 one : some//设定结算框的样式是哪个，根据list.checked
 })

 this.SumPrice()

}

// 全选
 handleAll(){
 var list = [...this.state.datalist]
 var all = this.state.all
 all = ! all
 for(var i = 0 ; i < list.length ;i++){
 list.checked = all
 }

 this.setState({
 all : all,
 one : all //全选的状态直接影响结算框的样式
 })
 this.SumPrice()
}

handleAdd(index){
 // 设定的value= {this.state.datalist.count}
 var list = [...this.state.datalist]
 list.count++;

 this.setState({
 datalist : list,
 })

 this.SumPrice()

}

handleMinus(index){
 // 设定的value= {this.state.datalist.count}
 var list = [...this.state.datalist];
 list.count--
 list.count=list.count<1?1:list.count;
 this.setState({
 datalist : list
 })

 this.SumPrice()
}

SumPrice(){
 var sum=0
 var count = 0;
 var list = [...this.state.datalist]
 for(var i =0; i< list.length ;i++){
 if(list.checked=== true){
 sum += list.newprice *list.count
 count += list.count
 }
 }

 this.setState({
 sumprice : sum,
 sumcount : count //结算个数
 })
}

}

export default CartPage;</pre>
</div>
 
CSS >
<div class="cnblogs_code">
<pre>.cartList{
background:#f4f5f7;
width:100%;
top:.99rem;
.cartListItem{
 width:100%;
 background:#fff;
 margin-bottom:.04rem;

 // 购物车列表
 .shopList{
 width:100%;
 // height:1.11rem;
 padding:0 .09rem;
 background:#fff;
 li{
 width:100%;
 height:1.11rem;
 border-bottom: 1px solid #e6e6e6;
 background: #fff;
 // 选中按钮
 .checkbtn{
 width:.17rem;
 height:1.11rem;
 float:left;
 }

 // 选中时候的类名
 .UnChecked{
 background:url("../../../image/cart-img/unselect.png") no-repeat;
 background-size:100% .25rem;
 }

 // 点击图片跳转
 .shopImg{
 width:1.1rem;
 height:1.1rem;
 margin:0 .1rem;
 float:left;
 .shopImgShow{
 width:1.1rem;
 height:1.1rem;
 img{
 width:100%;
 }
 }
 }
 // 购物车商品详情
 .shopInfo{
 width:2.08rem;
 height:1.1rem;
 padding:.1rem 0;
 float:left;
 .shopTitle{
 width:100%;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 height:.3rem;
 font-size:.14rem;
 }
 .shopCoupen{
 width:2.08rem;
 height:.12rem;
 margin:.1rem 0;
 }
 .shopPrice{
 width:2.08rem;
 height:.25rem;
 //价格
 .price{
 width:1.08rem;
 height:.21rem;
 float:left;
 span{
 font-size:.15rem;
 color:#f96d16;
 }
 i{
 font-size:.13rem;
 color:#999;
 text-decoration: line-through;
 font-style:normal;
 }
 }

 // 按钮
 .shopSelect{
 float:right;
 width:.775rem;
 height:.25rem;

 .minus{
 float:left;
 width:.225rem;
 height:.25rem;
 border:0;
 }
 input{
 float:left;
 width:.325rem;
 height:.25rem;
 text-align: center;
 border:0;
 }
 .add{
 float:left;
 width:.225rem;
 height:.25rem;
 border:0;
 }
 }
 }
 }
 }
 }
}

// 合算
div.sum{
width:100%;
height:.5rem;
background:#fff;
padding-left:.1rem;
position:fixed;
bottom:.5rem;
left:0;

input{
 height:100%;
 float:left;
}
.checkPrice{
 float:left;
 width:1.48rem;
 height:.41rem;
 line-height: .41rem;
 padding:.08rem 0;
 margin-left:.1rem;
 // 合计
 .totalPrice{
 float: left;
 width:.869rem;
 height:.36rem;
 line-height:.36rem;
 font-size:.16rem;
 color:#f96d16;
 .allsum{
 font-size:.13rem;
 color:#333;
 }
 }

 // 不含运费
 .fee{
 float:left;
 width:.61rem;
 font-size:.13rem;
 color:#999;
 }
}

// 结算按钮
.btnCheck{
 width:1.15rem;
 height:.49rem;
 background:rgb(249, 109, 22);
 float:right;
 line-height: .49rem;
 font-size:.18rem;
 color:#fff;
 text-align: center;
}
.btnNoCheck{
 width:1.15rem;
 height:.49rem;
 background:rgb(153, 153, 153);
 float:right;
 line-height: .49rem;
 font-size:.18rem;
 color:#fff;
 text-align: center;
}
}

}</pre>
</div>
  
来源：https://www.cnblogs.com/rabbit-lin0903/p/11603084.html

頁: [1]

琼殿技术论坛's Archiver

React == 实现简易购物车