实现列表的渲染
新建一个Shoppingcar.js 在里面写入代码
import React, { Component } from 'react'
import "./shoppingcar.css"
export default class Shoppingcar extends Component {
constructor(props){
super(props);
this.state={
list:[
{id:1,goodsname:"商品一",goodsnum:100,goodsprice:2,checked:false},
{id:2,goodsname:"商品二",goodsnum:200,goodsprice:10,checked:false},
{id:3,goodsname:"商品三",goodsnum:1,goodsprice:5,checked:false}
],
checkedCount:0,
total:0,
allNum:0
}
}
render() {
var trList = this.state.list.map(item=>
<ul className="tr" key={item.id}>
<li>
<input type="checkbox" checked={item.checked} onChange={(e)=>{
}}/>
</li>
<li>{item.goodsname}</li>
<li>{item.goodsprice}</li>
<li>
<button >
{item.goodsnum>1?"-":""}
</button>
<input value={item.goodsnum} onChange={()=>{}}/>
<button>+</button>
</li>
<li>{(item.goodsprice* item.goodsnum).toFixed(2)}</li>
<li onClick={()=>{
}}>删除</li>
</ul>
)
return (
<div className="shoppingcar">
<ul className="tr">
<li>
<input type="checkbox" ref="checkAll" onChange={(e)=>{
}}/> 全选
</li>
<li>商品名称</li>
<li>商品价格</li>
<li>商品数量</li>
<li>商品小计</li>
<li>操作</li>
</ul>
{trList}
<ul className="tr">
<li>总数为:{this.state.allNum}</li>
<li>金额为:{this.state.total}</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
)
}
}
第二步写入需要的样式 shoppingcar.css
*{
margin:0;
padding: 0;
list-style: none;
}
.shoppingcar{
width: 600px;
overflow: hidden;
margin: 50px auto;
}
.shoppingcar .tr{
width: 600px;
height: 30px;
}
.shoppingcar .tr li{
float: left;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: black;
color: aliceblue;
}
.shoppingcar .tr li input{
width: 50px;
}
3:运行效果
4:针对js中代码进行解释